这个浮层可以达到的效果如下:
浮层弹出时 , 浮层下的页面不可以滑动;点击对话框以外的区域 , 对话框消失;点击对话框内的区域 , 浮层不消失;
效果图:
代码如下:
wxml文件
<view class='container'><view class='moto-container' bindtap='onTab'><text class='moto'>开启浮层</text></view><view class='chunk1'></view><view class='chunk2'></view><view class='chunk3'></view></view><view class="mask" wx:if="{{show}}" bindtap='close' catchtouchmove='maskTouchMove'></view><view class="content-container" wx:if="{{ show}}" catchtouchmove='touchMove'><text class="content">浮层内容 \n 根据自己的需求写</text></view>
注意: 需要实现遮罩mask的touchmove , 并且使用catch , 在js中实现catchtouchmove方法 , 并且方法体中不写任何内容 , 这样mask就会把touchmove消费掉 , 遮罩下面的页面就不会接收到touchmove方法 , 就不会滑动 . 这是解决mask下面的页面滑动的思想 ; 同时 , 对话框也要实现touchmove , 同样的道理 .
js代码:
Page({data: {show: false},onTab: function() {this.setData({show: true})},close: function() {this.setData({show: false,})},touchMove: function() {},maskTouchMove: function() {},})
另外需要注意 , 对话框的层级要比mask的层级高 .
BUG : 如果你浮层下面的页面设置了 “enablePullDownRefresh”: true,了 , 这种写法虽然可以禁止浮层下面的页面滑动 , 但是不能禁止浮层下面页面的下拉刷新 . 如果想同时禁止下拉刷新 , 可以用scroll-view包括浮层下面的页面 , 因为scroll-view和下拉刷新是冲突的 , 利用设置scroll-view高度的方式来决定是否能下拉刷新 . 如果scroll-view没有固定高度 , 页面可以下拉刷新 , 如果有固定高度就不能下拉刷新 .
