微客导航 » 文章资讯 » 微信小程序实现漂亮的弹窗效果

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

2023-09-10 13:36:04 339

最近项目里需要实现一个带着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始终要比蒙层的大）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐