微信小程序自定义纯净模态框(弹出框)的实例代码


Posted in Javascript onMarch 09, 2020

由于官方API提供的模态框只能显示简单的文字,但是在实际应用场景中,我们需要模态框上能够显示各种各样的组件和样式,所以,以此为基础模拟出一套可以供大家自定义的纯净版的模态框,满足大家各式各样的需求。
效果图:

微信小程序自定义纯净模态框(弹出框)的实例代码

WXML:

<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"></view>
<view class="modal-dialog" hidden="{{!showModal}}">
 这一块区域为弹出框内容区域,根据自己的业务进行自定义布局
</view>

WXSS:

/* 模态框 */
 
.modal-mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
 z-index: 9000;
}
 
.modal-dialog {
 box-sizing:border-box;
 width: 85%;
 padding:30rpx;
 overflow: hidden;
 position: fixed;
 top: 20%;
 left: 0;
 right: 0;
 margin: 0 auto;
 z-index: 9999;
 background: white;
 border-radius: 5rpx;
}

JS:

data: {
 showModal: false, //false关闭模态框 true开启模态框
 },
 /**
 * 弹出框蒙层截断touchmove事件
 */
 preventTouchMove: function () {
 },
 /**
 * 隐藏模态对话框
 */
 hideModal() {
 var that = this;
 that.setData({
  showModal: false,
 })
 },

开启模态框,只需要在标签上绑定一个事件,将data里的showModal置为true即可。

此为最纯净的版本,个人经常使用,遂发出来,希望能够加快大家的开发效率。

到此这篇关于微信小程序自定义纯净模态框(弹出框)的实例代码的文章就介绍到这了,更多相关微信小程序自定义 模态框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
前端深入理解Typescript泛型概念
Mar 09 #Javascript
js实现无缝轮播图效果
Mar 09 #Javascript
js实现无缝轮播图
Mar 09 #Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 #Javascript
原生js实现瀑布流效果
Mar 09 #Javascript
原生JS实现贪吃蛇小游戏
Mar 09 #Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 #Javascript
You might like
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
利用Python破解斗地主残局详解
2017/06/30 Python
Python反射的用法实例分析
2018/02/11 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
Python装饰器结合递归原理解析
2020/07/02 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
口腔医学技术应届生求职信
2013/11/09 职场文书
创建文明学校实施方案
2014/03/11 职场文书
项目经理任命书
2014/06/04 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
小学生安全保证书
2015/05/09 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
Nebula Graph解决风控业务实践
2022/03/31 MySQL