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


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 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
Vue自定义指令详解
Jul 28 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
前端深入理解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 的 __FILE__ 常量
2007/01/15 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
jQuery实现长文字部分显示代码
2013/05/13 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Python3多线程基础知识点
2019/02/19 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python字符串的拼接方法总结
2019/11/18 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
python实现密码强度校验
2020/03/18 Python
Java模拟试题
2014/11/10 面试题
高中自我鉴定范文
2013/11/03 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
12月红领巾广播稿
2014/02/13 职场文书
法院信息化建设方案
2014/05/21 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
小学运动会报道稿
2014/10/04 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
Java使用HttpClient实现文件下载
2022/08/14 Java/Android