View組件

View組件
一、使用方法
view組件是最常用的，也是最簡單的視圖容器。它是一個塊級容器組件，它沒有特殊的功能，主要用於佈局展示，是佈局中最基本的UI組件。幾乎所有複雜的佈局都可以通過嵌套view來實現。
view除了公共屬性之外，還有以下幾個私有屬性

其中hover-stop-propagation屬性並不是說完全阻止了祖先節點的被點擊能力，它只是代表點擊當前view的時候，它的祖先節點不會產生點擊效果
二、案例
下面的案例演示了水平和垂直佈局的兩種嵌套view，每一個子view都有自己的顏色以及點擊效果。
1、wxml

<view class="container">
    <!-- 水平佈局，點擊之後背景色改變-->
    <view class='view-container1' hover-class='view-hover'>
        <!--點擊view1的時候，它的祖先節點不會體現出點擊狀態-->
        <view class='view1' hover-class='view-hover' hover-stop-propagation='{{true}}'>view1</view>
        <view class='view2' hover-class='view-hover' hover-stop-propagation='{{false}}'>view2</view>
        <view class='view3' hover-class='view-hover' hover-stop-propagation='{{false}}'>view3</view>
    </view>
    <view class='view-container2' hover-class='view-hover'>
        <view class='view4' hover-class='view-hover'>view4</view>
        <view class='view5' hover-class='view-hover'>view5</view>
        <view class='view6' hover-class='view-hover'>view6</view>
    </view>
</view>

2、wxss

/**index.wxss**/
/*彈性盒子佈局，垂直*/
.container {
  display: flex;
  flex-direction: column;
    align-items: left;
    margin: 20rpx;
}

/*第一個子容器，水平彈性，應該制定高度*/
.view-container1{
    display: flex;
    flex-direction: row;
    height: 200rpx;
    border: 2rpx solid;
    border-radius: 10rpx;
    margin-bottom: 30rpx;
    align-items: center;
}
.view1{
    width: 200rpx;
    height: 100rpx;
    background: #ff0000;
}
.view2{
    width: 200rpx;
    height: 100rpx;
    background: #00ff00;
}
.view3{
    width: 200rpx;
    height: 100rpx;
    background: #0000ff;
}

/*第二個子容器，垂直彈性，應該制定寬度*/
.view-container2{
    display: flex;
    flex-direction: column;
    width: 500rpx;
    align-items: center;
    border: 2rpx solid;
    border-radius: 15rpx;
}
.view4{
    width: 200rpx;
    height: 100rpx;
    background: #ff0000;
}
.view5{
    width: 200rpx;
    height: 100rpx;
    background: #00ff00;
}
.view6{
    width: 200rpx;
    height: 100rpx;
    background: #0000ff;
}
.view-hover{
    background: #e2e2e2;
}

3、js

/* author:  魏傑工作室
 * QQ:      2162408571
 * 羣:      792247623    791749272
 */

Page({
    data: {

    },

    onLoad: function() {

    }

})

三、效果

四、百度網盤源碼
鏈接: https://pan.baidu.com/s/1N7noj2fr0qiQg4s9-drXYw密碼: 4yxm