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、wuss
/**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
