微信小程序_(组件)view视图容器
微信小程序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视图容器的更多相关文章
- 微信小程序_(组件)scroll-view可滚动视图
微信小程序scroll-view组件官方文档 传送门 提前准备:使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary < ...
- 微信小程序_(组件)icon、text、rich-text、progress四大基础组件
微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的 ...
- 微信小程序_(组件)可拖动movable-view
微信小程序movable-view组件官方文档 传送门 Learn 一.moveable-view组件 一.movable-view组件 direction:movable-view的移动方向,属性值 ...
- 小程序开发基础-view视图容器
view 视图容器. // wxml <view class="section"> <view class="section__title"& ...
- 微信小程序_(组件)flex布局
小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction: ...
- 微信小程序_(组件)picker
picker组件效果 官方文档:传送门 Page({ data: { array: ['美国', '中国', '巴西', '日本'], objectArray: [ { id: 0, name: '美 ...
- 微信小程序_(组件)组件基础
(progress.text.block) 组件基础效果 官方文档:传送门 Page({ /** * 页面的初始数据 */ data: { text:"Gary 微信小程序\n", ...
- 微信小程序_(组件)canvas画布
canvas画布效果 官方文档:传送门 Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, o ...
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
随机推荐
- CentOS 中利用docker安装MySQL
1.前提条件 centos7 且内核版本高于3.10, 可通过命令: uname -r 查看内核版本 2.利用yum 安装docker 安装一些必要的系统工具: sudo yum install -y ...
- Python算法题(二)——国际象棋棋盘(排列组合问题,最小的K个数)
题目一(输出国际象棋棋盘) 分析: 用i控制行,j来控制列,根据i+j的和的变化来控制输出黑方格,还是白方格. 主要代码: for i in range(8): for j in range(8 ...
- vue.js项目开发实战笔记001——准备工作
1,Vue.js 是一套构建用户界面的渐进式框架. 2,Vue.js 是由尤雨溪开发出的,最早发布于2014年2月. 3,引用vue.js地址一CDN: <script src="ht ...
- 【Swift后台】环境安装
macOS 在macOS上使用Vapor,需要Xcode 9.3或更高版本.Swift 4.1或更高版本.安装还需要Homebrew命令. 检查Swift版本: swift --version Vap ...
- PKGSRC
PKGSRC简介 pkgsrc: The NetBSD Packages Collection The NetBSD Packages Collection (pkgsrc) 是在NetBSD系统以及 ...
- visio的形状默认是蓝色的填充色,怎么设置为白色为默认色?
如图所示: 设计->主题->选黑白那个 效果如下:
- 手机 简易浏览器 WebView的基本使用 返回 缓存 进度条
public class MainActivity extends AppCompatActivity { private WebView webView; private String url = ...
- qunee 缩略图
<!DOCTYPE html> <html> <head> <title>Hello Qunee for HTML5</title> < ...
- contos7 yum 安装golang
一.安装 [root@localhost golang]# yum install golang 安装默认目录为/usr/lib/golang/ 二.配置环境变量 echo "export ...
- moment.js 使用方法记录
操作 设值/赋值 1. 具体方法. 1)毫秒(millisecond) moment().millisecond(Number); moment().millisecond(); // Number ...