https://uniapp.dcloud.io/component/view

视图容器
它类似于传统html中的div，用于包裹各种元素内容

属性说明

属性名 类型 默认值 说明
hover-class String none 指定按下去的样式类。当 hover-class=”none” 时，没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time Number 50 按住后多久出现点击态，单位毫秒
hover-stay-time Number 400 手指松开后点击态保留时间，单位毫秒

hover-class举例

  1. <template>
  2.     <view class="content">
  3.         <view class="box" hover-class="box-active">
  4.             this is a box
  5.         </view>
  6.         <view class="">
  7.             this is a box1
  8.         </view>
  9.     </view>
  10. </template>
  12. <script>
  13.     export default {
  14.         data() {
  15.             return {
  16.                 title: 'Hello'
  17.             }
  18.         },
  19.         onLoad() {
  21.         },
  22.         methods: {
  24.         }
  25.     }
  26. </script>
  28. <style>
  29.     .box{
  30.         height: 100rpx;
  31.         width: 100rpx;
  32.         background: #0000FF;
  33.     }
  34.     .box-active{
  35.         background:#ff5500;
  36.     }
  37. </style>

hover-stop-propagation举例

  1. <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
  2. <template>
  3.     <view>
  4.         <view class="uni-padding-wrap uni-common-mt">
  5.             <view class="uni-title uni-common-mt">
  6.                 flex-direction: row
  7.                 <text>\n横向布局</text>
  8.             </view>
  9.             <view class="uni-flex uni-row">
  10.                 <view class="flex-item uni-bg-red">A</view>
  11.                 <view class="flex-item uni-bg-green">B</view>
  12.                 <view class="flex-item uni-bg-blue">C</view>
  13.             </view>
  14.             <view class="uni-title uni-common-mt">
  15.                 flex-direction: column
  16.                 <text>\n纵向布局</text>
  17.             </view>
  18.             <view class="uni-flex uni-column">
  19.                 <view class="flex-item flex-item-V uni-bg-red">A</view>
  20.                 <view class="flex-item flex-item-V uni-bg-green">B</view>
  21.                 <view class="flex-item flex-item-V uni-bg-blue">C</view>
  22.             </view>
  23.         </view>
  24.     </view>
  25. </template>

Tips

  • 如果使用
    ，编译时会被转换为