微信小程序实现漂亮的弹窗效果


Posted in Javascript onMay 26, 2020

最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西……
场面一度十分尴尬
可是得做啊,要不然产品大姐又要暴走了……
好吧,来研究一下模态对话框的性质自己DIY吧~

实现思路

模态对话框之所以被叫做“模态”,就是因为在它弹出的时候,用户如果不关闭这个对话框,是无法对其他窗口进行操作的。
那么这样一来,我们的思路就很明确了:

1. 构建一个蒙层(mask),使得背景变暗,并且阻止用户对对话框外界面的这里写代码片点击事件;
2. 构建一个对话框,在需要时弹出即可(弹出同时触发蒙层)。

示例代码

.wxml:

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

<view class="modalDlg" wx:if="{{showModal}}">
 <image src="/figures/logo-smile.png"/>
 <text>欢迎来到模态对话框~</text>
 <button bindtap="go">点我可以关掉对话框</button>
</view>

<button bindtap="submit">点我弹窗</button>

.wxss:

.mask{
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 z-index: 9000;
 opacity: 0.7;
}

.modalDlg{
 width: 580rpx;
 height: 620rpx;
 position: fixed;
 top: 50%;
 left: 0;
 z-index: 9999;
 margin: -370rpx 85rpx;
 background-color: #fff;
 border-radius: 36rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.js:

Page({

 data: {
  showModal: false
 },

 submit: function() {
  this.setData({
  showModal: true
  })
 },

 preventTouchMove: function() {

 },


 go: function() { 
  this.setData({
  showModal: false
  })
 }

})

需要注意的地方

  1. 蒙层view中绑定的preventTouchMove函数是一个空函数,使用了catch事件,目的就是阻止touchmove这样一个冒泡事件继续向下传递。
  2. 蒙层的wxss样式中,指定其大小为100%以占满整个屏幕。
  3. 模态对话框与蒙层的wxss样式中均有z-index属性,为的是保证对话框始终浮在蒙层的上方(即对话框的z-index始终要比蒙层的大)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
Angular排序实例详解
Jun 28 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
Angular通过指令动态添加组件问题
Jul 09 #Javascript
js实现左右两侧浮动广告
Jul 09 #Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 #Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 #Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 #Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 #Javascript
vue-cli配置环境变量的方法
Jul 09 #Javascript
You might like
PHP Reflection API详解
2015/05/12 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
python创建和删除目录的方法
2015/04/29 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
Python缓存技术实现过程详解
2019/09/25 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
大学生创业事迹材料
2014/12/30 职场文书
如何写通讯稿
2015/07/22 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
KVM基础命令详解
2022/04/30 Servers