ホームページ > 記事 > WeChat アプレット > ミニ プログラム ビュー コンテナーの最も基本的なコンテナーを理解する [コード付き]
WeChat ミニプログラム - ビューコンテナ: ミニプログラムの最も基本的なコンテナであり、ページ構造の分割、ページレイアウトの調整などを実現できます。パブリック属性に加えて、4 つの属性があります。
以下にコードを書きました。それを WeChat コンパイラーにコピーして実行して確認できればと思います。
ここで、hover-class は、クリックしたときにどのようなスタイルになるかを指します。hover-start-time は、クリックして hover-class のスタイルを表示するまでにかかる時間を指します。hover-stay-Timeこのスタイルがどれだけ持続するかについては、ホバーストップ伝播を説明するのが面倒なので、WeChat コンパイラにコピーして説明できればと思います。実行して確認してください。
index.wxml
<view class="container"> <view class='outBlock' hover-class='outBlockHover' hover-start-time='{{outStart}}' hover-stop-propagation='true' hover-stay-time='10000'> <view class='midBlock' hover-class='midBlockHover' hover-start-time='{{midStart}}' hover-stop-propagation='true'> <view class='inBlock' hover-class='inBlockHover' hover-start-time='{{inStart}}' hover-stop-propagation='true'> </view> </view> </view> </view>
index.wxss
.outBlock { border:1rpx solid black; width: 1000rpx; height: 500rpx; background-color:aqua; } .midBlock { border: 1rpx solid black; width:500rpx; height: 300rpx; margin: 100rpx; background-color: gray; } .inBlock { border: 1rpx solid black; width: 300rpx; height: 200rpx; margin: 50rpx; background-color: blueviolet; } .outBlockHover { background-color: black; } .midBlockHover { background-color: darkblue; } .inBlockHover { background-color: darkgreen; }
index.js
data: { outStart:1000, midStart:2000, inStart:3000 },
のデータ部分 通常、最も内側のボックスをクリックすると残りが変更され、中央のボックスが最も外側になります。最も内側のボックスが中央のボックスに含まれ、外側のボックスがその中に含まれ、中央のボックスが外側のボックスに含まれるため、範囲によっても変化します。この影響を防ぎたい場合は、ホバーストップ伝播を使用する必要があります。プロパゲーションの文字通りの意味は広がることであり、ホバーストッププロパゲーションの意味は平たく言えば、影響が広がるのを防ぐことです。
関連する推奨事項:
ビデオ チュートリアル: Container Component-Geek Academy WeChat ミニ プログラムを基礎から実践まで見る
以上がミニ プログラム ビュー コンテナーの最も基本的なコンテナーを理解する [コード付き]の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。