微信小程序开发-自定义模态对话框实例
来源:互联网 发布:js脚本怎么写 编辑:程序博客网 时间:2024/05/29 17:38
微信小程序—自定义模态对话框实例
由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。
- wx.showModal(OBJECT)
- 自定义
- 模态对话框
涉及文件
- 界面
wxml
- 样式
wxcss
- 事件及方法
js
效果图
界面代码 .wxml
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
样式 .wxss
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
事件及方法 .js
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
实现思路解读及原理
界面解读:
用一个蒙层+弹窗来组成,用绑定的数据{{showModal}}来控制弹窗的显示和隐藏事件及方法解读:
让弹窗显示的方法:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
让弹窗消失的方法:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
这里有个要特别注意的地方,就是下面这个方法:
- 1
- 2
- 1
- 2
为什么是空方法?因为要结合界面wxml看,蒙层view里有一个事件绑定catchtouchmove="preventTouchMove"
。这养写的原因是阻断事件向下传递,避免在弹窗后还可以点击或者滑动蒙层下的界面。如果不这样写的话,如果主界面是一个可以滚动的界面,想想看,当弹窗弹出的时候用户还可以操作滚动列表,我想你的产品经理会来找你的。
3. 样式解读:(这个标题没加代码块标识,但还是像代码块一样被显示了,这是个bug!!!- -)
.modal-mask和.modal-dialog样式的写法需要特别注意。
主要是层级关系,弹窗要保证在最上层,不被界面遮挡,然后蒙层要遮挡住界面,但是不可遮挡弹窗。所以.modal-mask和.modal-dialog的z-index值要注意。
阅读全文
1 0
- 微信小程序开发-自定义模态对话框实例
- 【微信小程序】自定义模态对话框实例
- 【微信小程序】自定义模态对话框实例
- 微信小程序—自定义模态对话框实例
- 微信小程序--自定义模态对话框
- 微信小程序自定义对话框
- 微信小程序-弹出自定义对话框
- 微信小程序开发实例
- 对话框--QDialog(自定义对话框简单实例)
- InstallShield创建自定义对话框 实例
- 自定义对话框设置模态
- 微信小程序的开发实例
- 微信小程序自定义对话框+弹出和隐藏动画详解
- 微信小程序 自定义浮层(弹出对话框为例)
- [置顶] 微信小程序自定义对话框+弹出和隐藏动画详解
- AlertDialog对话框的开发实例
- 开发微信小程序:创建小程序实例
- android开发之自定义对话框
- MOOC清华《面向对象程序设计》第1章:源文件的拆分与多文件的编译运行
- 原型陷阱
- 机器学习面试
- Linux下单分支if语句下 unary operator expected错误解决方法
- 2016区域赛青岛赛区总结(2016/11/15)
- 微信小程序开发-自定义模态对话框实例
- Spring Cloud入门二:eureka集群
- JDBC中Statement、PreparedStatement 、CallableStatement 区别和联系
- HDU 6080 度度熊保护村庄(计算几何+floyd)
- java 静态方法和实例方法的区别
- Java 用反射将JavaBean转成Map
- java学习之Iterator(迭代器)的基础用法(转)
- (19)备份与恢复、导入导出
- PHP内置的字符串长度函数strlen mb_strlen