title: view 视图容器 header: develop nav: component sidebar: view_view

webUrl: https://qft12m.smartapps.cn/component/view/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 否 手指松开后点击态保留的时间长度，单位毫秒

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/view/view - 图1 请使用百度APP扫码

代码示例1： 横向布局

:::codeTab

  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"
  6.                   hover-class="hover"
  7.                   hover-stop-propagation="false"
  8.                   hover-start-time="100"
  9.                   hover-stay-time="200">
  10.                 <text>A</text>
  11.             </view>
  12.             <view class="color-b">
  13.                 <text>B</text>
  14.             </view>
  15.             <view class="color-c">
  16.                 <text>C</text>
  17.             </view>
  18.         </view>
  19.     </view>
  20. </view>
  1. .rowlike {
  2.     margin: .2rem .57rem;
  3.     display: flex;
  4. }
  6. .rowlike view {
  7.     flex: 1;
  8.     text-align: center;
  9.     font-size: .16rem;
  10.     color: #FFF;
  11.     width: .91rem;
  12.     height: 1.22rem;
  13.     line-height: 1.22rem;
  14. }
  16. .color-a {
  17.     background-color: #5B9FFF;
  18. }
  20. .color-b {
  21.     background-color: #85B8FF;
  22. }
  24. .color-c {
  25.     background-color: #ADCFFF;
  26. }
  28. .hover {
  29.     opacity: .2;
  30. }

:::

代码示例2： 纵向布局

:::codeTab

  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>
  1. .collike {
  2.     margin: .2rem .68rem;
  3.     flex-direction: column;
  4. }
  6. .collike view {
  7.     height: 1.07rem;
  8.     width: 2.5rem;
  9.     line-height: 1.07rem;
  10.     flex: 1;
  11.     text-align: center;
  12.     font-size: .16rem;
  13.     color: #FFF;
  14. }
  15. .color-a {
  16.     background-color: #5B9FFF;
  17. }
  18. .color-b {
  19.     background-color: #85B8FF;
  20. }
  21. .color-c {
  22.     background-color: #ADCFFF;
  23. }
  24. .hover {
  25.     opacity: .2;
  26. }

:::

Bug&Tip

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