Chinaunix首页 | 论坛 | 博客
  • 博客访问: 4680732
  • 博文数量: 404
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 8429
  • 用 户 组: 普通用户
  • 注册时间: 2013-10-23 19:15
  • 认证徽章:
个人简介

qq:78080458 学习交流群:150633458

文章分类

全部博文(404)

文章存档

2019年(122)

2018年(130)

2016年(20)

2015年(60)

2014年(41)

2013年(31)

分类: Web开发

2018-08-07 08:27:40


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都有自己的颜色以及点击效果。

     1wxml

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

 

    }

 

})

 

三、效果

    

 

四、百度网盘源码

链接: https://pan.baidu.com/s/1N7noj2fr0qiQg4s9-drXYw密码: 4yxm

     


 


阅读(1710) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册