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

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

本篇文章给大家带来的内容是关于微信小程序实例：自定义对话框的代码实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

自定义模态对话框实例

由于官方API提供的显示模态弹窗，只能简单地显示文字内容，不能对对话框内容进行自定义，欠缺灵活性，所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。

wx.showModal(OBJECT)

自定义

模态对话框

涉及文件

界面 wxml样式 wxcss事件及方法 js

效果图

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

界面代码 .wxml

弹窗 添加数量 取消 确定 -

样式 .wxss

.show-btn { margin-top: 100rpx; color: #22cc22;}.modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; color: #fff;}.modal-dialog { width: 540rpx; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 9999; background: #f9f9f9; margin: -180rpx 105rpx; border-radius: 36rpx;}.modal-title { padding-top: 50rpx; font-size: 36rpx; color: #030303; text-align: center;}.modal-content { padding: 50rpx 32rpx;}.modal-input { display: flex; background: #fff; border: 2rpx solid #ddd; border-radius: 4rpx; font-size: 28rpx;}.input { width: 100%; height: 82rpx; font-size: 28rpx; line-height: 28rpx; padding: 0 20rpx; box-sizing: border-box; color: #333;}input-holder { color: #666; font-size: 28rpx;}.modal-footer { display: flex; flex-direction: row; height: 86rpx; border-top: 1px solid #dedede; font-size: 34rpx; line-height: 86rpx;}.btn-cancel { width: 50%; color: #666; text-align: center; border-right: 1px solid #dedede;}.btn-confirm { width: 50%; color: #ec5300; text-align: center;}-

事件及方法 .js

实现思路解读及原理

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

事件及方法解读： 让弹窗显示的方法：

showDialogBtn: function() { this.setData({ showModal: true }) }-

让弹窗消失的方法：

hideModal: function () { this.setData({ showModal: false }); }-

这里有个要特别注意的地方，就是下面这个方法：

preventTouchMove: function () { }-

3. 样式解读：(这个标题没加代码块标识，但还是像代码块一样被显示了，这是个bug！！！- -)-

.modal-mask和.modal-dialog样式的写法需要特别注意。 主要是层级关系，弹窗要保证在最上层，不被界面遮挡，然后蒙层要遮挡住界面，但是不可遮挡弹窗。所以.modal-mask和.modal-dialog的z-index值要注意。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。