視圖容器view的屬性說明
view的flex布局
-
hover-class
指定按下去的樣式類。當(dāng) hover-class="none" 時(shí)垄分，沒有點(diǎn)擊態(tài)效果。
<view hover-class='hover_red'>
.hover_red {
color: white;
background-color: yellow;
}
-
hover-stop-propagation
指定是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài)
-
hover-start-time
按住后多久出現(xiàn)點(diǎn)擊態(tài)糕伐，單位毫秒择份。 默認(rèn)50毫秒
-
hover-stay-time
手指松開后點(diǎn)擊態(tài)保留時(shí)間，單位毫秒官帘。 默認(rèn)400毫秒
代碼部分
//wxml
<view>
<view class='row-container'>
<view class='one' hover-class="hover" hover-stop-propagation="true" hover-start-time="1000" hover-stay-time='3000'>1</view>
<view class='two'>2</view>
<view class='three'>3</view>
</view>
<view class='column-container'>
<view class='one'>1</view>
<view class='two'>2</view>
<view class='three'>3</view>
</view>
</view>
// wxss
.row-container {
display: flex;
flex-direction: row;
width: 100%;
background-color: orange;
}
.column-container {
display: flex;
flex-direction: column;
margin-top: 80rpx;
}
.one {
width: 200rpx;
height: 200rpx;
background-color: red;
font-size: 20px;
}
.two {
width: 200rpx;
height: 200rpx;
background-color: green;
font-size: 20px;
}
.three {
width: 200rpx;
height: 200rpx;
background-color: blue;
font-size: 20px;
}
.hover_red {
color: white;
background-color: yellow;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
