建站资讯

想做微商城小程序

作者:admin 发布时间:2020-12-29

想做微商城小程序:微信小程序:自定义弹出层

最近项目里需要实现一个带着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 }) }})
需要注意的地方蒙层view中绑定的preventTouchMove函数是一个空函数 使用了catch事件 目的就是阻止touchmove这样一个冒泡事件继续向下传递。蒙层的wxss样式中 指定其大小为100%以占满整个屏幕。模态对话框与蒙层的wxss样式中均有z-index属性 为的是保证对话框始终浮在蒙层的上方 即对话框的z-index始终要比蒙层的大

转载 https://blog.csdn.net/m549393829/article/details/77996153

点赞 2 评论 5
PHP中读取(截取substr)字符串前N个字符或者从第几个字符开始取几个字符 103316

收缩