小程序-view

视图容器view的属性说明

view的flex布局

• hover-class

  指定按下去的样式类。当 hover-class="none" 时，没有点击态效果。

  <view hover-class='hover_red'> 

  .hover_red {
    color: white;
    background-color: yellow;
  }

• hover-stop-propagation

  指定是否阻止本节点的祖先节点出现点击态

• hover-start-time

  按住后多久出现点击态，单位毫秒。 默认50毫秒

• hover-stay-time

  手指松开后点击态保留时间，单位毫秒。 默认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;
}