微信小程序view组件官方文档  传送门

  

  

  Learn

    一、hover-class属性

    二、hover-start-time与hover-stay-time属性

    三、hover-stop-propagation属性

  

一、hover-class属性

  hover-class:指定按下去的样式类。当 hover-class="none" 时,没有点击态效果【默认值none】

  定义.a的class颜色为红色,定义.d的class为绿色,当鼠标点击时红色区域变成绿色区域,当鼠标离开时,绿色区域又变回红色区域

  background: red;
order:;
flex:;
} .d{
background: green;
order:;
flex:;
}

<!--index.wxml-->
Cynical丶Gary
<view class="container"> <view class='a size' hover-class='d'>a</view> </view>

index.wxml

.container{
display: flex; } .size{
width: 100rpx;
height: 150rpx;
} .a{
background: red;
order:;
flex:;
} .b{
background: yellow;
order:;
flex:;
} .c{
background: blue;
order:;
flex:;
} .d{
background: green;
order:;
flex:;
} .e{
background: orange;
order:;
flex:;
}

index.wxss

二、hover-start-time与hover-stay-time属性

  hover-start-time:按住后多久出现点击态,单位毫秒【默认值50毫秒】

  hover-stay-time:手指松开后点击态保留时间,单位毫秒【默认值400毫秒】

  添加hover-start-time='1000' hover-stay-time='2000'两个属性,当手指按下1s后class样式由.a改变为.d,手指松开2s后class样式由d改变回a

<!--index.wxml-->
Cynical丶Gary
<view class="container"> <!-- 手指按下后1s样式由a改变为d,手指松开后2s样式由d改变回a -->
<view class='a size' hover-class='d'
hover-start-time='1000' hover-stay-time='2000'>a</view> </view>

index.wxml

.container{
display: flex; } .size{
width: 100rpx;
height: 150rpx;
} .a{
background: red;
order:;
flex:;
} .b{
background: yellow;
order:;
flex:;
} .c{
background: blue;
order:;
flex:;
} .d{
background: green;
order:;
flex:;
} .e{
background: orange;
order:;
flex:;
}

index.wxss

三、hover-stop-propagation属性

  hover-stop-propagation:指定是否阻止本节点的祖先节点出现点击态【默认值false】

  hover-stop-propagation和JavaScript中的冒泡事件很像

  JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素。

  事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这 一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。

  目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形 式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方便地得知这个事件是从哪个元素开始 的。

  事件的冒泡和捕获

  捕获是从上级元素到下级元素,冒泡是从下级元素到上级元素.

  使用方法

  <view class='a size' hover-class='d'
hover-start-time='1000' hover-stay-time='2000'
hover-stop-propagation='true'>a</view>
<!--index.wxml-->
Cynical丶Gary
<view class="container"> <!-- 手指按下后1s样式由a改变为d,手指松开后2s样式由d改变回a -->
<view class='a size' hover-class='d'
hover-start-time='1000' hover-stay-time='2000'
hover-stop-propagation='true'>a</view> </view>

index.wxml

.container{
display: flex; } .size{
width: 100rpx;
height: 150rpx;
} .a{
background: red;
order:;
flex:;
} .b{
background: yellow;
order:;
flex:;
} .c{
background: blue;
order:;
flex:;
} .d{
background: green;
order:;
flex:;
} .e{
background: orange;
order:;
flex:;
}

index.wxss

微信小程序_(组件)view视图容器的更多相关文章

  1. 微信小程序_(组件)scroll-view可滚动视图

    微信小程序scroll-view组件官方文档 传送门 提前准备:使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary < ...

  2. 微信小程序_(组件)icon、text、rich-text、progress四大基础组件

    微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的 ...

  3. 微信小程序_(组件)可拖动movable-view

    微信小程序movable-view组件官方文档 传送门 Learn 一.moveable-view组件 一.movable-view组件 direction:movable-view的移动方向,属性值 ...

  4. 小程序开发基础-view视图容器

    view 视图容器. // wxml <view class="section"> <view class="section__title"& ...

  5. 微信小程序_(组件)flex布局

    小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction: ...

  6. 微信小程序_(组件)picker

    picker组件效果 官方文档:传送门 Page({ data: { array: ['美国', '中国', '巴西', '日本'], objectArray: [ { id: 0, name: '美 ...

  7. 微信小程序_(组件)组件基础

    (progress.text.block) 组件基础效果 官方文档:传送门 Page({ /** * 页面的初始数据 */ data: { text:"Gary 微信小程序\n", ...

  8. 微信小程序_(组件)canvas画布

    canvas画布效果 官方文档:传送门 Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, o ...

  9. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

随机推荐

  1. C#面向对象9 字符串

    1.字符串的不可变性 当你给一个字符串重新赋值之后,老的值并没有销毁,而是重新开辟了一块空间(堆)存储新的值. **当程序结束后,GC扫描整个内存,如果发现有的空间没有被指向,则立即把它销毁. 示意图 ...

  2. 【Git的基本操作九】ssh免密登录

    SSH免密登录 1. 进入用户家目录 cd ~ 2. 删除原有的 .ssh 目录 rm -r .ssh 3. 运行命令生成 .ssh 目录 ssh-keygen -t rsa -C github或gi ...

  3. Docker 备忘

    C/S架构: 客户端发出命令给服务器端(内含守护进程),守护进程执行命令后将结果传回给客户端.(可以远程访问,可以本地访问) 容器内部操作: 可写层下面都是只读的,操作时需要什么文件会被复制到可写层, ...

  4. Go语言并发机制

    Go语言中的并发 使用goroutine编程 使用 go 关键字用来创建 goroutine .将go声明放到一个需调用的函数之前,在相同地址空间调用运行这个函数,这样该函数执行时便会作为一个独立的并 ...

  5. Mybatis Plus 使用详解

    Mybatis Plus 是Mybatis的增强插件,对数据库操作Mybatis Plus提供了抽象层次比Mybatis更高的操作方法. Wrapper是Mybatis Plus里拼接sql的包装类. ...

  6. 深入学习Mybatis框架(二)- 进阶

    1.动态SQL 1.1 什么是动态SQL? 动态SQL就是通过传入的参数不一样,可以组成不同结构的SQL语句. 这种可以根据参数的条件而改变SQL结构的SQL语句,我们称为动态SQL语句.使用动态SQ ...

  7. DBUtils封装数据库返回对象的各种方法

    ①ArrayHandler:     将查询结果的第一行数据,保存到Object数组中       ②ArrayListHandler     将查询的结果,每一行先封装到Object数组中,然后将数 ...

  8. 1.opencv_画图

    #导入工具包 import numpy as np import cv2 import matplotlib.pyplot as plt # 定义显示图片 def show(image): plt.i ...

  9. 数据库——Oracle(7)

    1 索引(二):索引是用来提高查询的效率. 索引的优点和缺点: 优点:索引可以提高查询的速度. 缺点:创建索引会占用磁盘物理空间,而且添加索引,会减慢修改(insert,update,delete)数 ...

  10. docker安装kafka快速入门

    docker安装kafka快速入门 1.安装zookeeper docker search zookeeperdocker pull zookeeperdocker run -d -v /home/s ...