本文实例为大家分享了微信小程序实现弹出层效果的具体代码,供大家参考,具体内容如下
效果图
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) { },
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年10月04日
2024年10月04日
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]
- 班得瑞原装进口《第九张新世纪专辑:微风山谷》1CD[APE/CUE分轨][331MB]
- 陈慧琳.2008-Love.Fighters演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 米志宏.1994-HAPPY1994【波丽佳音】【WAV+CUE】
- 潘美辰.2006-最冷的夏天(引进版)【美梦辰真】【WAV+CUE】
- 班得瑞原装进口《第十张新世纪专辑:月光水岸》1CD[APE/CUE分轨][277.2MB]
- 班得瑞原装进口《第十一张新世纪专辑:雾色山脉》1CD[APE/CUE分轨][291.6MB]