view

Introduction

View container. Equivalent to the div tag in HTML, it can separate a webpage into independent and distinct parts.

Attribute Description

Attribute Name	Type	Default	Required	Description
hover-stop-propagation	Boolean	FALSE	No	Specifies whether to prevent ancestor nodes of this node from appearing in click state

Events

Name	Description	Callback Parameters
tap	Callback function triggered when clicked	Event

Example

Code Example 1: Horizontal Layout

<view class="wrap">
  <view class="card-area">
    <view class="top-description border-bottom">Horizontal Layout</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;
}

Code Example 2: Vertical Layout

<view class="wrap">
  <view class="card-area">
    <view class="top-description border-bottom">Vertical Layout</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;
}