侧边弹窗

遮罩层 html

<view class='mask' wx:if="{{filter}}" bindtap="doFilter"></view>

遮罩层样式

.mask{
  position:fixed;
  z-index:99;
  background-color:rgba(0,0,0,0.7);
  bottom:0;
  right:0;
  left:0;
  top:0;
}

侧边弹窗html

<view class='m-filter' wx:if="{{filter}}">
  <view  class="list">
  </view>
  <view class="btn">
  </view>
</view>

侧边弹窗css

.m-filter{
  height:100%;
  width:70%;
  overflow-y:auto;
  background:#fff;
  position:fixed;
  top:0;
  right:0;
  z-index:101;
  font-size:24rpx;
  line-height:60rpx;
  display:flex;
  flex-direction:column;
  text-align:left;
}

.list样式

image.png

.list{
  padding:30rpx 50rpx 30rpx 100rpx;
  margin-bottom:80rpx;
  -webkit-overflow-scrolling:touch;
}