小程序遮罩层模板实现

 WXML页面

<view class="dialog_screen" wx:if="{{showModalStatus}}" catchtouchmove='true'></view>
  <view animation="{{animationData}}" class="dialog_attr_box" wx:if="{{showModalStatus}}">
    <view style='background:white;position: relative;overflow: hidden;'>
      <view class='dialog_title'>
    <view class="swiper-modal">
      <view class="swiper-tab-list {{current=='0'?'active':''}}" data-current="0" bindtap="tabNav">到厂时间
        <image class='down' src="{{current=='0'?'../../images/select1.png':'../../images/select.png'}}"></image>
      </view>
      <view class="swiper-tab-list {{current=='1'?'active':''}}" data-current="1" bindtap="tabNav">进出口
        <image class='down' src="{{current=='1'?'../../images/select1.png':'../../images/select.png'}}"></image>
      </view>
      <view class="swiper-tab-list {{current=='2'?'active':''}}" data-current="2" bindtap="tabNav">箱型
        <image class='down' src="{{current=='2'?'../../images/select1.png':'../../images/select.png'}}"></image>
      </view>
      <view class="swiper-tab-list {{current=='3'?'active':''}}" data-current="3" bindtap="tabNav">支付方式
        <image class='down' src="{{current=='3'?'../../images/select1.png':'../../images/select.png'}}"></image>
      </view>
    </view>
      <view>
          <block wx:if="{{current=='0'}}">
          <view class="limitedAt">
            <picker mode="date" value="{{date}}" bindchange="changeDate">
              <input class="picker-detail" disabled placeholder="年-月-日" value='{{date}}'></input>
          </picker>
            
          </view>
          <picker mode="time" value="{{time}}" bindchange="changeTime">
            <view class='picker-time'>到厂时间:
            <input class="time" disabled placeholder="0:00-23:00" value='{{time}}'></input></view>   
          </picker>
        </block>
        <block wx:if="{{current=='1'}}">
          <view class="cargoType">
            <view class="in {{state=='import'?'active1':''}}"  data-state="import" bindtap="cargoType">进口</view>
            <view class="ex {{state=='export'?'active1':''}}" data-state="export" bindtap="cargoType">出口</view>
          </view>
        </block>
        <block wx:if="{{current=='2'}}">
        <scroll-view scroll-y class="posContainer">
          <view class="boxType" wx:for="{{boxType}}" wx:for-index='index' wx:key="index">
            <view class="tag {{selectIndex[index].sureid==true?'active':''}}" data-index="{{index}}" data-box-type="{{item}}" bindtap="boxSelect">{{item}}</view>
            <image class="boxImg" src="{{selectIndex[index].sureid? '../../images/boxSelect.png':''}}"></image>
          </view>
          </scroll-view>
        </block>
        <block wx:if="{{current=='3'}}">
          <view class="cargoType">
            <view class="in {{states=='online'?'active1':''}}"  data-states="online" bindtap="payType">平台垫付</view>     
            <view class="ex {{states=='offline'?'active1':''}}" data-states="offline" bindtap="payType">线下结算</view>
          </view>
        </block>
      </view>
      <view class='solid'></view>
        <view class='button'>
        <view class='clean' bindtap='cancleModal'>清空筛选</view>
        <view class='confirm' bindtap="hideModal" >确定</view>
        </view>
    </view>
</view>
</view>

WXSS页面 

/* 弹出样式 */
.dialog_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 80rpx;
  left: 0;
  background: #000;
  opacity: 0.3;
  overflow: hidden;
  z-index: 1000;
  color: #FFFFFF;
}

.dialog_attr_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 79rpx;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 1px;
  color: rgb(141, 139, 139);
}
.swiper-modal{
  font-size: 32rpx;
  flex-direction: row;
}
.swiper-tab-list{
  display: table-cell;
  width: 10%;
  font-size: 29.16rpx;
  text-align: center;
}
.limitedAt{
  width: 100%;
}
.down{
  position: relative;
  width: 50rpx;
  height: 50rpx;
  top:15rpx;
  right: 10rpx;
}
.solid{
  width: 100%;
  height: 2rpx;
  background-color: #b1b1b1;
}
.button{
  height: 70rpx;
  width: 100%;
  font-size: 32rpx;
  border: 1px solid white;
}
.clean,.confirm{
  width: 48%;
  height: 70rpx;
  float: left;
  text-align: center;
  line-height: 70rpx;
}
.active,.confirm{
  color: #01C2AB;
}

JS页面方法

data: {
    current:0,
  },
// 筛选
  tabNav:function(e){
    if (this.data.current === e.target.dataset.current) {
      return false;
    } else {
      this.setData({
        current: e.target.dataset.current,
        isActive: !this.data.isActive,
      })
    }
  },
showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(0).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: !this.data.showModalStatus
    })
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
  },
  hideModal: function () {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(0).step()
    this.setData({
      animationData: animation.export(),
    })
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
}

 

效果图 

页面遮罩后，后面内容还可滚动 ，加上 catchtouchmove='true' 就好了，但电脑上会没反应，真机上可以看到效果