小程序弹窗显示,背景滚动穿透问题

  • Post author:
  • Post category:小程序


问题描述:弹窗显示,遮罩层滑动不影响背景,遮罩上面的内容滑动时,背景内容跟着滚动

解决办法:

显示时:

<view class='formItem personal' id='link_period' wx:if='{{!formConfig.period.is_hidden}}'>
    <view class='lable'>
        学段
        <text decode="{{true}}">{{!formConfig.period.is_required?'&nbsp;':'*'}}</text>
        <van-field value="{{ period }}" placeholder="请选择学段" bindtap='changePeriod' />
    </view>
</view>
    changePeriod(){
        this.setData({showPeriodList:true})
        wx.setPageStyle({
            style: {
              overflow: 'hidden'
            }
          })
    },

隐藏时:

<van-popup show="{{ showPeriodList }}" closeable position="bottom" custom-style="height: 50%" bind:close="onClosePeriod" round lock-scroll="{{true}}">
    <view class="schoolBox">
        <block wx:for="{{periodList}}" wx:key="index">
            <view class="schoolItem" catchtap="selectItem" data-item="{{item}}">{{item.period}}</view>
        </block>
    </view>
</van-popup>
    selectItem(e){
        let {item} = e.currentTarget.dataset
        this.setData({
            showPeriodList:false,
            period:item.period,
        })
        wx.setStorageSync(`crm_period`, item.period);
        wx.setPageStyle({
            style: {
              overflow: ''
            }
          })
    },
    onClosePeriod() {//==================关闭弹层
        this.setData({ showPeriodList: false });
        wx.setPageStyle({
            style: {
              overflow: ''
            }
          })
      },

这里注意有隐藏的方法都要加

wx.setPageStyle({


style: {


overflow: ”

}

})



版权声明:本文为kjhytfh原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。