微信小程序--自定义模态对话框
来源:互联网 发布:辉煌seo 编辑:程序博客网 时间:2024/05/24 02:07
由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。
- wx.showModal(OBJECT)
- 自定义
- 模态对话框
涉及文件
- 界面
wxml
- 样式
wxcss
- 事件及方法
js
效果图
界面代码 .wxml
- 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
事件及方法 .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
实现思路解读及原理
界面解读:
用一个蒙层+弹窗来组成,用绑定的数据{{showModal}}来控制弹窗的显示和隐藏事件及方法解读:
让弹窗显示的方法:
- 1
- 2
- 3
- 4
- 5
让弹窗消失的方法:
- 1
- 2
- 3
- 4
- 5
这里有个要特别注意的地方,就是下面这个方法:
- 1
- 2
为什么是空方法?因为要结合界面wxml看,蒙层view里有一个事件绑定catchtouchmove="preventTouchMove"
。这养写的原因是阻断事件向下传递,避免在弹窗后还可以点击或者滑动蒙层下的界面。如果不这样写的话,如果主界面是一个可以滚动的界面,想想看,当弹窗弹出的时候用户还可以操作滚动列表,我想你的产品经理会来找你的。
- 1
- 2
.modal-mask和.modal-dialog样式的写法需要特别注意。
主要是层级关系,弹窗要保证在最上层,不被界面遮挡,然后蒙层要遮挡住界面,但是不可遮挡弹窗。所以.modal-mask和.modal-dialog的z-index值要注意。
阅读全文
0 0
- 【微信小程序】自定义模态对话框实例
- 【微信小程序】自定义模态对话框实例
- 微信小程序--自定义模态对话框
- 微信小程序自定义对话框
- 微信小程序开发-自定义模态对话框实例
- 微信小程序—自定义模态对话框实例
- 微信小程序-弹出自定义对话框
- 自定义对话框设置模态
- 微信小程序自定义对话框+弹出和隐藏动画详解
- 微信小程序 自定义浮层(弹出对话框为例)
- [置顶] 微信小程序自定义对话框+弹出和隐藏动画详解
- symbian下实现自定义模态对话框
- IOS: 自定义AlertView实现模态对话框
- 自定义AlertView实现模态对话框
- 自定义 AlertView 实现模态对话框
- [IOS] 自定义AlertView实现模态对话框
- 自定义AlertView实现模态对话框
- IOS: 自定义AlertView实现模态对话框
- JMeter学习—006—JMeter 命令行(非GUI模式)详解(一)-分布式(远程)执行脚本及查看指定结果、日志
- oracle中存储函数与存储过程的区别
- 计算机网络五层概述
- Kotlin VS Swift
- js中的错误处理机制
- 微信小程序--自定义模态对话框
- Redis 数据类型
- 天天学Linux命令42--ping命令
- 徒手创建一个webpack全自动生产与发布分离的环境
- 按指定列排序 dataframe sort_values
- python3 文件系统 open, close, write 方法
- 嵌入式linux面试题解析(三)——Linux应用编程部分一
- np.random.randint产生一个范围内的数据
- Solr服务原理。