一、使用方法
view组件是最常用的,也是最简单的视图容器。它是一个块级容器组件,它没有特殊的功能,主要用于布局展示,是布局中最基本的UI组件。几乎所有复杂的布局都可以通过嵌套view来实现。
view除了公共属性之外,还有以下几个私有属性
属性名 | 类型 | 默认值 | 说明 |
hover-class | String | none | 指定按下去的样式类,默认值没有点击效果 |
hover-stop-propagation | Boolean | false | 指定是否阻止本几点的祖先节点出现点击态 |
hover-start-time | Number | 50 | 按住多久出现点击态,单位毫秒 |
hover-stay-time | Number | 400 | 手指松开后保持点击的状态,单位毫秒 |
其中hover-stop-propagation属性并不是说完全阻止了祖先节点的被点击能力,它只是代表点击当前view的时候,它的祖先节点不会产生点击效果
二、案例
下面的案例演示了水平和垂直布局的两种嵌套view,每一个子view都有自己的颜色以及点击效果。
1、wxml
<viewclass="container"> <!--水平布局,点击之后背景色改变--> <viewclass='view-container1'hover-class='view-hover'> <!--点击view1的时候,它的祖先节点不会体现出点击状态--> <viewclass='view1'hover-class='view-hover'hover-stop-propagation='{{true}}'>view1</view> <viewclass='view2'hover-class='view-hover'hover-stop-propagation='{{false}}'>view2</view> <viewclass='view3'hover-class='view-hover'hover-stop-propagation='{{false}}'>view3</view> </view> <viewclass='view-container2'hover-class='view-hover'> <viewclass='view4'hover-class='view-hover'>view4</view> <viewclass='view5'hover-class='view-hover'>view5</view> <viewclass='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:2rpxsolid; 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:2rpxsolid; 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