百度智能小程序 视图容器
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 | 否 | 手指松开后点击态保留的时间长度，单位毫秒 |
示例
代码示例 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: .2rem .57rem;
display: flex;
}
.rowlike view {
flex: 1;
text-align: center;
font-size: .16rem;
color: #FFF;
width: .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: .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: .2rem .68rem;
flex-direction: column;
}
.collike view {
height: 1.07rem;
width: 2.5rem;
line-height: 1.07rem;
flex: 1;
text-align: center;
font-size: .16rem;
color: #FFF;
}
.color-a {
background-color: #5B9FFF;
}
.color-b {
background-color: #85B8FF;
}
.color-c {
background-color: #ADCFFF;
}
.hover {
opacity: .2;
}Bug & Tip
- Tip：如果需要使用滚动视图，请使用 scroll-view。
- Tip：从基础库版本 1.12.0 开始支持事件捕获、冒泡。