view

简介

视图容器。相当于 HTML 中的 div 标签，可将页面分割为独立的、不同的部分。

属性说明

属性名	类型	默认值	必填	说明
hover-stop-propagation	Boolean	FALSE	否	指定是否阻止本节点的祖先节点出现点击态

事件

名称	说明	回调参数
tap	点击时时触发函数	Event

示例

代码示例 1：横向布局

<view class="wrap">
  <view class="card-area">
    <view class="top-description border-bottom">横向布局</view>
    <view class="rowlike">
      <view
        class="color-a"
        hover-class="hover"
        hover-stop-propagation="false"
        hover-start-time="100"
        hover-stay-time="200"
      >
        <text>A</text>
      </view>
      <view class="color-b">
        <text>B</text>
      </view>
      <view class="color-c">
        <text>C</text>
      </view>
    </view>
  </view>
</view>

.rowlike {
  margin: 0.2rem 0.57rem;
  display: flex;
}

.rowlike view {
  flex: 1;
  text-align: center;
  font-size: 0.16rem;
  color: #fff;
  width: 0.91rem;
  height: 1.22rem;
  line-height: 1.22rem;
}

.color-a {
  background-color: #5b9fff;
}

.color-b {
  background-color: #85b8ff;
}

.color-c {
  background-color: #adcfff;
}

.hover {
  opacity: 0.2;
}

代码示例 2：纵向布局

<view class="wrap">
  <view class="card-area">
    <view class="top-description border-bottom">纵向布局</view>
    <view class="collike">
      <view class="color-a">
        <text>A</text>
      </view>
      <view class="color-b">
        <text>B</text>
      </view>
      <view class="color-c">
        <text>C</text>
      </view>
    </view>
  </view>
</view>

.collike {
  margin: 0.2rem 0.68rem;
  flex-direction: column;
}

.collike view {
  height: 1.07rem;
  width: 2.5rem;
  line-height: 1.07rem;
  flex: 1;
  text-align: center;
  font-size: 0.16rem;
  color: #fff;
}
.color-a {
  background-color: #5b9fff;
}
.color-b {
  background-color: #85b8ff;
}
.color-c {
  background-color: #adcfff;
}
.hover {
  opacity: 0.2;
}