微信小程序实例：自定义对话框的代码实现

本篇文章给大家带来的内容是关于微信小程序实例：自定义对话框的代码实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。自定义模态对话框实例由于官方API提供的显示模态弹窗，只能简单地显示文字内容，不能对对话框内容进行自定义，欠缺灵活性，所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。

wx.showModal(OBJECT)

自定义

模态对话框涉及文件界面 wxml

样式 wxcss

事件及方法 js效果图

界面代码 .wxml<button>界面解读： 用一个蒙层+弹窗来组成，用绑定的数据{{showModal}}来控制弹窗的显示和隐藏

事件及方法解读： 让弹窗显示的方法：showDialogBtn: function() {this.setData({showModal: true})}让弹窗消失的方法：hideModal: function () {this.setData({showModal: false});}这里有个要特别注意的地方，就是下面这个方法：preventTouchMove: function () {}为什么是空方法？因为要结合界面wxml看，蒙层view里有一个事件绑定catchtouchmove="preventTouchMove"。这养写的原因是阻断事件向下传递，避免在弹窗后还可以点击或者滑动蒙层下的界面。如果不这样写的话，如果主界面是一个可以滚动的界面，想想看，当弹窗弹出的时候用户还可以操作滚动列表，我想你的产品经理会来找你的。 3. 样式解读：(这个标题没加代码块标识，但还是像代码块一样被显示了，这是个bug！！！- -).modal-mask和.modal-dialog样式的写法需要特别注意。 主要是层级关系，弹窗要保证在最上层，不被界面遮挡，然后蒙层要遮挡住界面，但是不可遮挡弹窗。所以.modal-mask和.modal-dialog的z-index值要注意。

相关推荐：

微信小程序中ivew weapp控件如何引用

微信小程序实例：自定义导航栏的实现方法以上就是微信小程序实例：自定义对话框的代码实现的详细内容，更多请关注小潘博客其它相关文章！