怎么在微信小程序中实现弹窗禁止页面滚动功能

在微信小程序开发中，弹窗是非常常见的一种组件，但是在弹窗出现的时候往往会带来一些问题，比如弹窗之后页面还能够滚动，这可能对用户体验造成一定的影响，因此禁止页面滚动是非常必要的。本文将介绍如何在微信小程序中实现弹窗禁止页面滚动的功能。

1. 获取页面滚动高度

我们需要获取到页面滚动高度，以便在弹窗显示时记录下来，以便后续恢复页面滚动位置。可以通过以下方式获取页面滚动高度：

wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
  console.log(res.scrollTop);
}).exec();

在上述代码中，我们使用 wx.createSelectorQuery().selectViewport().scrollOffset() 方法获取到了页面滚动高度，具体来说，我们通过 wx.createSelectorQuery() 方法获取到了一个 SelectorQuery 对象，之后再调用 selectViewport() 方法获取到了一个代表可视窗口区域的节点对象，最后通过 scrollOffset() 方法获取到了页面滚动高度。

2. 禁止页面滚动

当弹窗出现时，我们需要禁止页面滚动，这可以通过给页面主体添加 overflow:hidden 样式来实现，具体来说，我们可以通过以下方式实现：

let height = 0;
wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
  // 获取页面滚动高度
  height = res.scrollTop;
}).exec();

// 禁止页面滚动
wx.pageScrollTo({
  scrollTop: height,
  duration: 0
});

// 给页面主体添加 overflow:hidden 样式
let query = wx.createSelectorQuery();
query.select("#wrapper").boundingClientRect((res)=>{
  let height = res.height;
  wx.createSelectorQuery().select("#wrapper").boundingClientRect((res)=>{
    let scrollHeight = res.height;
    if(scrollHeight - height > 0){
      wx.setStorageSync("scrollPosition", this.data.scrollTop + height);
      this.setData({
        wrapperHeight: scrollHeight + "px",
        overflow: "hidden",
        scrollInMyModal: true
      });
    }
  }).exec();
}).exec();

在上述代码中，我们先通过 wx.createSelectorQuery() 方法获取到了页面滚动高度，之后再通过 wx.pageScrollTo() 方法来禁止页面滚动。接下来，在给页面主体添加 overflow:hidden 样式之前，我们需要判断页面主体的高度是否超出了可视区域的高度，并且记录下当前页面滚动位置。如果超出了，则调用 setData() 方法给页面主体添加 overflow:hidden 样式。

3. 恢复页面滚动

当弹窗关闭时，我们需要恢复页面滚动，这可以通过给页面主体移除 overflow:hidden 样式，并且调用 wx.pageScrollTo() 方法来恢复页面滚动位置，具体来说，我们可以通过以下方式实现：

// 移除 overflow:hidden 样式,恢复页面滚动
this.setData({
  overflow: "",
  wrapperHeight: "",
  scrollInMyModal: false
});
let scrollPosition = wx.getStorageSync("scrollPosition");
if(scrollPosition){
  wx.pageScrollTo({
    scrollTop: scrollPosition,
    duration: 0
  });
  wx.removeStorageSync("scrollPosition");
}

在上述代码中，我们通过 setData() 方法移除了页面主体的 overflow:hidden 样式，并且调用 wx.pageScrollTo() 方法来恢复页面滚动位置，同时需要将之前记录的页面滚动位置清除掉。

综上所述，我们可以通过以上三个步骤来实现微信小程序中弹窗禁止页面滚动的功能。