view

视图容器，类似DIV。

属性名类型默认值说明最低版本
hover-classStringnone指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-timeNumber50按住后多久出现点击态，单位毫秒
hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态

示例

  1. <view class="page-section-title">
  2.   <text>flex-direction: row\n横向布局</text>
  3. </view>
  4.   <view class="page-section-spacing">
  5.     <view class="flex-wrp" style="flex-direction:row;">
  6.       <view hover-class="hover" class="flex-item demo-text-1"></view>
  7.       <view hover-class="hover" class="flex-item demo-text-2"></view>
  8.       <view hover-class="hover" class="flex-item demo-text-3"></view>
  9.     </view>
  10.   </view>
  11. </view>
  12. <view class="page-section">
  13.   <view class="page-section-title">
  14.     <text>flex-direction: column\n纵向布局</text>
  15.   </view>
  16.   <view class="flex-wrp" style="flex-direction:column;">
  17.     <view class="flex-item flex-item-V demo-text-1"></view>
  18.     <view class="flex-item flex-item-V demo-text-2"></view>
  19.     <view class="flex-item flex-item-V demo-text-3"></view>
  20.   </view>
  21. </view>
  1. .flex-wrp{
  2.   margin-top: 60rpx;
  3.   display:flex;
  4. }
  5. .flex-item{
  6.   width: 200rpx;
  7.   height: 300rpx;
  8.   font-size: 26rpx;
  9. }
  10. .flex-item.hover {
  11.     background: green;
  12. }
  13. .flex-item-V{
  14.   margin: 0 auto;
  15.   width: 300rpx;
  16.   height: 200rpx;
  17. }

view - 图1
加了hover-class属性后的效果：
view - 图2

原文: https://developer.toutiao.com/docs/comp/view.html