微信小程序实现漂亮的弹窗效果
2018-07-09 11:53
1111 查看
最近项目里需要实现一个带着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始终要比蒙层的大)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序实现蒙版弹窗效果
- 微信小程序实现选项卡效果
- 微信小程序实现MUI数字输入框效果
- 微信小程序实现自定义picker选择器弹窗内容
- 微信小程序实现循环动画效果
- 微信小程序 tabs选项卡效果的实现
- JS简单实现自定义弹窗及程序中断,继续效果
- 微信小程序 --- CSS实现仿网易云音乐播放界面效果(黑胶唱片与唱针纯CSS实现)
- 微信小程序实现带缩略图轮播效果
- 微信小程序 tabs选项卡效果的实现
- 微信小程序实现跑马灯效果
- 微信小程序 实现tabs选项卡效果实例代码
- 微信小程序开发常用技巧(7)——实现一个类似于Android toast效果动画
- 微信小程序实现“鲜肉APP”首页效果
- 微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
- 微信小程序开发之实现个滚动的效果的两种方法
- 微信小程序实现顶部普通选项卡效果(非swiper)
- 微信小程序实现登录页云层漂浮的动画效果
- 微信小程序源码大集004---小程序实现大转盘 仿天猫抽奖 跑马灯效果(有图有源码)