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

否

手指松开后点击态保留的时间长度（单位：毫秒）

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

代码示例 1：横向布局

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

代码示例 2：纵向布局

  • SWAN
  • CSS
  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 开始支持事件捕获、冒泡。