View组件

view组件是最常用的，也是最简单的视图容器。它是一个块级容器组件，它没有特殊的功能，主要用于布局展示，是布局中最基本的UI组件。几乎所有复杂的布局都可以通过嵌套view来实现。view除了公共属性之外，还有以下几个私有属性

其中hover-stop-propagation属性并不是说完全阻止了祖先节点的被点击能力，它只是代表点击当前view的时候，它的祖先节点不会产生点击效果

下面的案例演示了水平和垂直布局的两种嵌套view，每一个子view都有自己的颜色以及点击效果。1、wxml

        
         
             
              
      
       view1
              
      
       view2
              
      
       view3
          
         
             
      
       view4
              
      
       view5
              
      
       view6
          
     
    

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() {  }})

三、效果

四、百度网盘源码