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

最新推荐文章于 2024-04-19 10:17:03 发布

你眼里有光呀

最新推荐文章于 2024-04-19 10:17:03 发布

阅读量688

点赞数

文章标签：小程序前端 javascript vue.js

本文链接：https://blog.csdn.net/kjhytfh/article/details/125207322

版权

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

解决办法：

显示时：

<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: ''
            }
          })
      },

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