百度智能小程序 视图容器

view 视图容器

解释：视图容器，相当于 html 中的 div ，可将页面分割为独立的、不同的部分。如果需要使用滚动视图，请使用 scroll-view。

属性说明

示例 

在开发者工具中打开

代码示例 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 开始支持事件捕获、冒泡。