Comprendre le conteneur le plus basique du mini conteneur de vue programme [avec code]

WeChat Mini Program - View Container : C'est le conteneur le plus basique du mini programme, qui peut réaliser la division de la structure des pages, l'ajustement de la mise en page, etc. En plus des attributs publics, il existe 4 attributs.

J'ai écrit un morceau de code ci-dessous. Il serait préférable d'expliquer l'effet en l'exprimant. J'espère pouvoir le copier sur votre compilateur WeChat et l'exécuter pour vérifier.

Ici, hover-class fait référence au style qu'il deviendra lorsque nous cliquons, et hover-start-time fait référence au temps qu'il faudra avant que nous cliquions. hover-class, hover-stay-time fait référence à la durée de vie de ce style. L'explication de la propagation du survol est gênante, j'espère donc qu'il sera préférable de l'expliquer à travers l'effet. Je peux le copier sur votre WeChat. Exécutez le compilateur pour voir.

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;
}

partie de données d'index.js

 data: {
       outStart:1000,
       midStart:2000,
       inStart:3000
  },

Normalement, lorsque nous cliquons sur une case la plus intérieure, le reste changera, et la case la plus extérieure au milieu changera également, en raison de la portée, car la boîte la plus intérieure est incluse au milieu, à l'intérieur de la boîte extérieure, et celui du milieu est inclus dans la boîte extérieure. Si nous voulons éviter cet effet, nous devons utiliser la propagation par survol. Le sens littéral de la propagation est de se propager, et le sens de la propagation en survol est, en termes simples, d'empêcher l'effet de se propager.

Recommandations associées :

Calculatrice graphique PHP

Tutoriel vidéo : Afficher le mini-programme WeChat du composant conteneur-Geek Academy, des bases au combat réel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!