微信小程序实现遮罩层( 弹框 / 浮层 )

这个浮层可以达到的效果如下:

1. 浮层弹出时 , 浮层下的页面不可以滑动;
2. 点击对话框以外的区域 , 对话框消失;
3. 点击对话框内的区域 , 浮层不消失;

效果图:

代码如下:

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没有固定高度 , 页面可以下拉刷新 , 如果有固定高度就不能下拉刷新 .