view 视图容器

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

属性说明

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

示例

在开发者工具中预览效果

扫码体验

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