微信小程序实现漂亮的弹窗效果
最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西……
场面一度十分尴尬
可是得做啊,要不然产品大姐又要暴走了……
好吧,来研究一下模态对话框的性质自己DIY吧~
实现思路
模态对话框之所以被叫做“模态”,就是因为在它弹出的时候,用户如果不关闭这个对话框,是无法对其他窗口进行操作的。
那么这样一来,我们的思路就很明确了:
1.构建一个蒙层(mask),使得背景变暗,并且阻止用户对对话框外界面的这里写代码片点击事件;
2.构建一个对话框,在需要时弹出即可(弹出同时触发蒙层)。
示例代码
.wxml:
欢迎来到模态对话框~ 点我可以关掉对话框 点我弹窗
.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:-370rpx85rpx; 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 }) } })
需要注意的地方
- 蒙层view中绑定的preventTouchMove函数是一个空函数,使用了catch事件,目的就是阻止touchmove这样一个冒泡事件继续向下传递。
- 蒙层的wxss样式中,指定其大小为100%以占满整个屏幕。
- 模态对话框与蒙层的wxss样式中均有z-index属性,为的是保证对话框始终浮在蒙层的上方(即对话框的z-index始终要比蒙层的大)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。