【微信小程序】自定义模态对话框实例
来源:互联网 发布:颜色取色器小工具 mac 编辑:程序博客网 时间:2024/05/22 12:35
(转载)http://blog.csdn.net/zhuyb829/article/details/73349295
自定义模态对话框实例
由于官方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值要注意。
阅读全文
0 0
- 【微信小程序】自定义模态对话框实例
- 【微信小程序】自定义模态对话框实例
- 微信小程序开发-自定义模态对话框实例
- 微信小程序—自定义模态对话框实例
- 微信小程序--自定义模态对话框
- 微信小程序自定义对话框
- 微信小程序-弹出自定义对话框
- 对话框--QDialog(自定义对话框简单实例)
- InstallShield创建自定义对话框 实例
- 自定义对话框设置模态
- 微信小程序自定义对话框+弹出和隐藏动画详解
- 微信小程序 自定义浮层(弹出对话框为例)
- [置顶] 微信小程序自定义对话框+弹出和隐藏动画详解
- InstallShield创建自定义对话框 实例(转)
- InstallShield创建自定义对话框 实例2
- symbian下实现自定义模态对话框
- IOS: 自定义AlertView实现模态对话框
- 自定义AlertView实现模态对话框
- Spark Streaming 中使用 zookeeper 保存 offset 并重用 Java版
- 木棒问题
- UE4_动画系统
- GreenDao3.0使用时的心得体会
- Mybatis报错:Invalid bound statement (not found)
- 【微信小程序】自定义模态对话框实例
- zookeeper集群搭建
- Fluent在服务器上的并行
- zoj 3688 The Review Plan II
- 数据结构——堆
- Android:WebView的代码详解=
- mysql(七)存储过程
- 设置状态栏颜色
- 简单的遮罩层