小程序打开自定义弹框组件后禁止背景滚动

要求当弹框打开时，背景不能滚动；当弹框关闭时，背景恢复滚动

1.在app.wxss中增加全局样式

.stop-scroll {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

2.在被使用的page页.js或.ts文件 data中增加变量

openAlert: false, //是否打开弹框
scrollClass:'',   //保存page 滚动类名

3.在page中增加两个方法

//打开弹框
  openAlert(){
    this.setData({
      openAlert: true,
      scrollClass:'stop-scroll'
    })
  },
  //关闭弹框
  closeAlert(){
    this.setData({
      openAlert: false,
      scrollClass:''
    })
  },

4.在page的wxml文件最外层view 上添加类变量

<view class="container {{scrollClass}}">
    ...
</view>

以上操作，当调用 openAlert()打开弹框时，背景不能滚动；当调用 closeAlert()关闭弹框后，背景恢复滚动