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


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之小练习代码
Oct 12 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
JS async 函数的含义和用法实例总结
Apr 08 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
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
react基本安装与测试示例
2020/04/27 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
Python中的类与对象之描述符详解
2015/03/27 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Python itertools.product方法代码实例
2020/03/27 Python
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
公务员职业生涯规划书范文  
2014/01/19 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
深度学习tensorflow基础mnist
2021/04/14 Python
Redis 哨兵集群的实现
2021/06/18 Redis
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python