コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > WeChat アプレット > ミニプログラム開発 > WeChat アプレットの公式コンポーネントの解釈と分析: 1. ビュー (ビュー コンテナー)

WeChat アプレットの公式コンポーネントの解釈と分析: 1. ビュー (ビュー コンテナー)

巴扎黑
リリース： 2017-03-19 18:20:25
オリジナル
1662 人が閲覧しました

コンポーネントの説明を表示:
コンテナを表示
HTML コードの p と同様に、他のコンポーネントをラップしたり、他のコンポーネント内にラップしたりできます。比較的自由に使用でき、固定された構造はありません。 viewコンポーネントの使用法：
wxmlサンプルプロジェクトのコード：

[xml]

plainテキストビュー

コピーコードrreeewxssサンプルプロジェクトのコード：

[css]
plainテキストビューView Style Flex-DirectionのRreeeeRendering：row：

WXMLコードは次のとおりです。 ] プレーンテキストビュー コードをコピー

    <view  class="btnGroup">
            <view class="item orange" >退格</view>
            <view class="item orange" >清屏</view>
            <view class="item orange" >+/-</view>
            <view class="item orange" >+</view>
          </view>
          <view  class="btnGroup">
            <view class="item blue" >9</view>
            <view class="item blue" >8</view>
            <view class="item blue" >7</view>
            <view class="item orange" >-</view>
          </view>
          <view  class="btnGroup">
            <view class="item blue" >6</view>
            <view class="item blue" >5</view>
            <view class="item blue" >4</view>
            <view class="item orange" >×</view>
          </view>
          <view  class="btnGroup">
            <view class="item blue" >3</view>
            <view class="item blue" >2</view>
            <view class="item blue" >1</view>
            <view class="item orange" >÷</view>
          </view>
          <view  class="btnGroup">
            <view class="item blue" >0</view>
            <view class="item blue" >.</view>
            <view class="item blue" >历史</view>
            <view class="item orange" >=</view>
          </view>
ログイン後にコピー


ビュースタイルのレンダリング flex-direction: 列:

WXML コードは次のとおりです:

[XML] プレーンテキストビュー コードをコピー

    .btnGroup{
        display:flex;
        flex-direction:row;
    }
    .orange{
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
    }
    .blue{
        color: #d9eef7;
        border: solid 1px #0076a3;
        background: #0095cd;
    }
ログイン後にコピー


WXSS コードは次のとおりです:

[CSS] プレーンテキストビュー コードをコピー

    <view class="flex-wrp">
        <view class="flex-item red" ></view>
        <view class="flex-item green" ></view>
        <view class="flex-item blue" ></view>
    </view>
ログイン後にコピー



ビュースタイルのレンダリング justify-content: flex-start:

WXML コードは次のとおりです:

[XML] plainテキストビューコードをコピーする

    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }
ログイン後にコピー


wxssコードは次のとおりです。 -end:

WXML コードは次のとおりです: [XML] プレーンテキストビュー

コードをコピー


    <view class="flex-wrp column">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>
ログイン後にコピー


WXSS コードは次のとおりです:

[CSS]

プレーンテキストビュー コードをコピー 

    .column{
       flex-direction:column;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }
ログイン後にコピー


ビュースタイル justify-content: center のレンダリング:

WXML コードは次のとおりです:

[XML] プレーンテキストビュー コードをコピー

    <view class="flex-wrp flex-start">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>
ログイン後にコピー


WXSS コードは次のとおりです:

[CSS ]

プレーンテキストビュー コードをコピー

    .flex-start{
        flex-direction:row;
        justify-content: flex-start;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }
ログイン後にコピー


ビュースタイル justify-content: space-between:

WXML コードのレンダリングは次のとおりです: [XML] プレーンテキストビュー

コードをコピー



    <view class="flex-wrp flex-end">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>
ログイン後にコピー


WXSSコードは次のとおりです:

[CSS] プレーンテキストビュー コードをコピーします 

    .flex-end{
        flex-direction:row;
        justify-content: flex-end;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }
ログイン後にコピー


ビュースタイルのレンダリング justify-content: space-around:

WXMLコードは次のとおりです: [XML] プレーンテキストビュー

コードをコピー

    <view class="flex-wrp justify-content-center">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>
ログイン後にコピー


WXSSコードは次のとおりです:

[CSS] 纯文本查看 复制代码

    .space-around{
        flex-direction:row;
        justify-content: space-around;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }
ログイン後にコピー



视图样式align-items: flex-end的效果图：

WXML代码如下：

[XML] 纯文本查看 复制代码

<view class="flex-wrp align-items-flex-end">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー


WXSS代码如下：

[CSS] 纯文本查看 复制代码

.align-items-flex-end{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: flex-end;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー



视图样式align-items: center的效果图：

WXML代码如下：

[XML] 纯文本查看 复制代码

<view class="flex-wrp align-items-center">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー



WXSS代码如下：

[CSS] 纯文本查看 复制代码

.align-items-center{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: center;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー



视图样式align-items: flex-start的效果图：

WXML代码如下：

[XML] 纯文本查看 复制代码

<view class="flex-wrp align-items-flex-start">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー



WXSS代码如下：

[CSS] 纯文本查看 复制代码

.align-items-flex-start{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: flex-start;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー

主要属性：

排列方式（flex-direction），用于wxss

属性

描述

row

横向排列

column

纵向排列


弹性项目内容对齐（justify-content），用于wxss


属性

描述

flex-start

弹性项目向行头紧挨着填充

flex-end

弹性项目向行尾紧挨着填充

center

弹性项目居中紧挨着填充

space-between

弹性项目平均分布在该行上

space-around

弹性项目平均分布在该行上，两边留有一半的间隔空间


wxss のコンテナーの内側軸上の項目の配置 (align-items) ストレッチ

デフォルトでは、フレックス項目はコンテナーに合わせて引き伸ばされます center フレックス項目はコンテナーの中心に配置されます flex-startフレックス項目コンテナの先頭にありますflex-endフレックス項目はコンテナの最後にありますベースラインフレックス項目はコンテナのベースラインにありますコンテナ

以上がWeChat アプレットの公式コンポーネントの解釈と分析: 1. ビュー (ビュー コンテナー)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
微信小程序官方组件解读和分析：一、view（视图容器 ）
ソース：php.cn
前の記事：WeChat ミニプログラムのフロントエンドソースコードと分析例の詳細な説明 次の記事：WeChat アプレット コンポーネントの解釈と分析: 2. スクロールビュー (スクロール可能なビュー領域)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2261
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2396
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2010
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1893
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1960
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート