view 视图容器

解释：视图容器，相当于 html 中的 div ，可将页面分割为独立的、不同的部分。如果需要使用滚动视图，请使用 scroll-view。

属性说明

属性名 类型 默认值 必填 说明
--- --- --- --- ---
hover-class String none 否 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation Boolean false 否 指定是否阻止本节点的祖先节点出现点击态
hover-start-time Number 50 否 按住后出现点击态的时间长度，单位毫秒
hover-stay-time Number 400 否 手指松开后点击态保留的时间长度，单位毫秒

示例

在开发者工具中预览效果

扫码体验

view 视图容器 - 图1请使用百度APP扫码

代码示例1： 横向布局

1. <view class='wrap'>
2. <view class="card-area">
3. <view class="top-description border-bottom">横向布局</view>
4. <view class="rowlike">
5. <view class="color-a" hover-class="hover" hover-start-time="100" hover-stay-time="200" hover-stop-propagation="false">
6. <text>A</text>
7. </view>
8. <view class="color-b">
9. <text>B</text>
10. </view>
11. <view class="color-c">
12. <text>C</text>
13. </view>
14. </view>
15. </view>
16. </view>

代码示例2： 纵向布局

1. <view class='wrap'>
2. <view class="card-area">
3. <view class="top-description border-bottom">纵向布局</view>
4. <view class="collike">
5. <view class="color-a">
6. <text>A</text>
7. </view>
8. <view class="color-b">
9. <text>B</text>
10. </view>
11. <view class="color-c">
12. <text>C</text>
13. </view>
14. </view>
15. </view>
16. </view>

Bug&Tip

  • Tip：如果需要使用滚动视图，请使用 scroll-view。
  • Tip：从基础库版本1.12.0开始支持事件捕获、冒泡。