ミニ プログラム ビュー コンテナーの最も基本的なコンテナーを理解する [コード付き]

WeChat ミニプログラム - ビューコンテナ: ミニプログラムの最も基本的なコンテナであり、ページ構造の分割、ページレイアウトの調整などを実現できます。パブリック属性に加えて、4 つの属性があります。

以下にコードを書きました。それを WeChat コンパイラーにコピーして実行して確認できればと思います。

ここで、hover-class は、クリックしたときにどのようなスタイルになるかを指します。hover-start-time は、クリックして hover-class のスタイルを表示するまでにかかる時間を指します。hover-stay-Timeこのスタイルがどれだけ持続するかについては、ホバーストップ伝播を説明するのが面倒なので、WeChat コンパイラにコピーして説明できればと思います。実行して確認してください。

index.wxml

<view class="container">
    <view  class=&#39;outBlock&#39; hover-class=&#39;outBlockHover&#39; hover-start-time=&#39;{{outStart}}&#39; hover-stop-propagation=&#39;true&#39; hover-stay-time=&#39;10000&#39;>
       <view  class=&#39;midBlock&#39; hover-class=&#39;midBlockHover&#39; hover-start-time=&#39;{{midStart}}&#39; hover-stop-propagation=&#39;true&#39;>
            <view class=&#39;inBlock&#39; hover-class=&#39;inBlockHover&#39; hover-start-time=&#39;{{inStart}}&#39; hover-stop-propagation=&#39;true&#39;>
                      
            </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
  },

のデータ部分 通常、最も内側のボックスをクリックすると残りが変更され、中央のボックスが最も外側になります。最も内側のボックスが中央のボックスに含まれ、外側のボックスがその中に含まれ、中央のボックスが外側のボックスに含まれるため、範囲によっても変化します。この影響を防ぎたい場合は、ホバーストップ伝播を使用する必要があります。プロパゲーションの文字通りの意味は広がることであり、ホバーストッププロパゲーションの意味は平たく言えば、影響が広がるのを防ぐことです。

関連する推奨事項:

PHP Graphing Calculator

ビデオ チュートリアル: Container Component-Geek Academy WeChat ミニ プログラムを基礎から実践まで見る

以上がミニ プログラム ビュー コンテナーの最も基本的なコンテナーを理解する [コード付き]の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。