时间:2021-05-18
本文实例为大家分享了微信小程序实现弹出层效果的具体代码,供大家参考,具体内容如下
效果图
WXML
<view class='popup' wx:if="{{popShow}}"> <view class='mask' catchtouchmove="preventTouchMove" catchtap='closePop'> </view> <!-- 弹出层 --> <view class='popup_main' id='popup_main' > <!-- 关闭按钮 --> <view class='close_wrapper'> <image class='close_icon' src='/images/select_icons/close.png' mode='widthFix' bindtap='closePop'></image> </view> <!-- 主要内容 --> <view class='pop_list_wrapper'>这里加入你想加入的内容</view> </view></view>WXSS
.popup { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; } .mask { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .popup_main { position: fixed; top: 50%; left: 50%; width: 85%; transform: translate(-50%, -50%); padding: 10px; box-sizing: border-box; background-color: #fff; border: 5px; border-radius: 10px; } .close_wrapper { width: 100%; height: 20px; display: flex; align-items: center; justify-content: flex-end; } .close_icon { width: 16px; }JS
data: {/** 弹出层 **/ popShow: false,} /** * 弹出层 */ // 打开弹窗 popupTap: function (e) { this.setData({ popShow: true }) }, // 关闭弹窗 closePop: function (e) { this.setData({ popShow: false }) }, // 这个函数内容为空 用于阻止屏幕滚动 preventTouchMove: function (e) { },为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家。微信小程序自定义创建自定义创建与默认创建完全相同,只
本文实例讲述了JS实现可自定义大小,可双击关闭的弹出层效果。分享给大家供大家参考。具体如下:这是一款JS弹出层,可自定义大小,双击关闭层,可以弹出500,300
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限
本文实例讲述了微信小程序自定义toast组件的方法。分享给大家供大家参考,具体如下:怎么创建就不说了,前面一篇有微信小程序自定义prompt组件直接上代码wxm
本文实例为大家分享了微信小程序自定义底部弹出框的具体代码,供大家参考,具体内容如下实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择