微信小程序-自定义弹出层
2018-09-19 10:25
295 查看
版权声明:部分内容借鉴其他作者,如有侵权,请与我联系 https://blog.csdn.net/crabfrog/article/details/82768295
效果图
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) { },阅读更多
相关文章推荐
- 微信小程序自定义对话框+弹出和隐藏动画详解
- 微信小程序-弹出自定义对话框
- 微信小程序 自定义showmodal 弹出框
- 微信小程序:自定义弹出层
- 微信小程序 自定义浮层(弹出对话框为例)
- 微信小程序自定义对话框弹出和隐藏动画
- 微信小程序自定义底部弹出框
- [置顶] 微信小程序自定义对话框+弹出和隐藏动画详解
- JS中微信小程序自定义底部弹出框
- 微信小程序自定义底部弹出框
- 微信小程序弹出自定义模态框,禁止底部页面滚动事件
- 微信小程序之自定义select下拉选项框组件
- 微信小程序商品循环列表点击弹出当前的商品信息
- 微信小程序自定义组件
- 详解微信小程序――自定义圆形进度条
- 微信小程序自定义组件:对话框、指示器、五星评分...
- 微信小程序自定义分享封面
- 微信小程序——监听点击事件,自定义属性
- 微信小程序数据分析之自定义分析的实现
- 微信小程序自定义toast , 超简单详细教程