---
name: "view"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "view - 视图容器"
---

## view

> [VERSION] 基础库 >= 2.10.0

### 描述

视图容器，是最基本的布局组件，类似 HTML 中的 div。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `hover-class` | `string` | 否 | - | 指定按下去的样式类，hover-class="none" 时无点击态效果 |
| `hover-stop-propagation` | `boolean` | 否 | `false` | 是否阻止本节点的祖先节点出现点击态 |
| `hover-start-time` | `number` | 否 | `20` | 按住后多久出现点击态，单位毫秒 |
| `hover-stay-time` | `number` | 否 | `70` | 手指松开后点击态保留时间，单位毫秒 |

### 示例代码

#### 基础布局

*index.tyml*

```xml
<view class="container">
  <view class="box">基础视图容器</view>
  <view class="row">
    <view class="col">左</view>
    <view class="col">右</view>
  </view>
</view>
```

*index.tyss*

```css
.container {
  padding: 20rpx;
}
.box {
  background: #f5f5f5;
  padding: 20rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}
.row {
  display: flex;
}
.col {
  flex: 1;
  background: #e0e0e0;
  padding: 20rpx;
  text-align: center;
  font-size: 28rpx;
}
.col:first-child {
  margin-right: 10rpx;
}
```

*index.js*

```javascript
Page({});
```

#### 点击态效果

*index.tyml*

```xml
<view class="demo">
  <view
    class="btn"
    hover-class="btn-hover"
    hover-start-time="{{50}}"
    hover-stay-time="{{400}}"
  >点击查看点击态效果</view>
</view>
```

*index.tyss*

```css
.demo {
  padding: 40rpx;
}
.btn {
  background: #007aff;
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
  text-align: center;
  font-size: 28rpx;
}
.btn-hover {
  opacity: 0.6;
}
```

*index.js*

```javascript
Page({});
```