微信小程序实现漂亮的弹窗效果_微信小程序首页冒泡提示 - CSDN文库

微信小程序

178 浏览量更新于2023-03-03 评论 2 收藏 43KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

最近项目里需要实现一个带着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

})

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38663733

粉丝: 3
资源: 902

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈