JavaScript

超轻量级php框架startmvc

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

更新时间:2020-07-16 03:24:02 作者:startmvc
最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModa

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

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

微信小程序 弹窗