小程序中view視圖容器怎么用

本篇內(nèi)容主要講解“小程序中view視圖容器怎么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“小程序中view視圖容器怎么用”吧!

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部分

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

正常情況下，當(dāng)我們點(diǎn)擊任何最內(nèi)部的box的時(shí)候其余都會改變，中間的box的時(shí)候最外外面的也會改變，因?yàn)榉秶脑?，因?yàn)樽罾锩娴腷ox是包含在中間的，外面的box里面，中間的包含在外面的box內(nèi)。如果我們想要阻止這種效果，那就要用hover-stop-propagation了。propagation字面的意思就是傳播，hover-stop-propagation意思就是，通俗的講，防止把效果傳播出去的意思。

到此，相信大家對“小程序中view視圖容器怎么用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！