时间:2021-05-18
最近项目里需要实现一个带着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 }) }})需要注意的地方
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序开发文档,相关文章:微信小程序action-sheet微信小程序modal微信小程序toast微信小程序loading微信小程序modal对话弹窗属性
本文实例为大家分享了微信小程序实现蒙版弹窗效果的具体代码,供大家参考,具体内容如下X立即充值充值js://点击充值弹窗submit:function(){thi
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下:微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然
本文实例为大家分享了微信小程序实现签到弹窗的具体代码,供大家参考,具体内容如下效果图如下所示图片素材:.wxml签到签到成功获得0积分好的.wxsspage{b