View组件

View组件

一、使用方法

       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

<view class="container">

   

    <view class='view-container1' hover-class='view-hover'>

       

        <view class='view1' hover-class='view-hover' hover-stop-propagation='{{true}}'>view1view>

        <view class='view2' hover-class='view-hover' hover-stop-propagation='{{false}}'>view2view>

        <view class='view3' hover-class='view-hover' hover-stop-propagation='{{false}}'>view3view>

    view>

    <view class='view-container2' hover-class='view-hover'>

        <view class='view4' hover-class='view-hover'>view4view>

        <view class='view5' hover-class='view-hover'>view5view>

        <view class='view6' hover-class='view-hover'>view6view>

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

 

    }

 

})

 

三、效果

    

 

四、百度网盘源码

链接: 密码: 4yxm