微信小程序设置打开弹出层后，让下层页面不可滑动

本文将详细介绍如何在微信小程序中实现当打开弹出层时，下层页面不可滑动。这对于很多场景都非常实用，例如，当弹出层的目的是需要用户输入信息时，禁止滑动有助于用户专注于输入内容，避免误操作。

具体实现步骤如下：

1. 在页面的 WXML 文件中，为弹出层添加样式类名 popup-layer。

<view class="popup-layer" style="display: none;">
  <!-- 弹出层的内容 -->
</view>

2. 在页面的 WXSS 文件中，为 .popup-layer 类名添加样式。

.popup-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

3. 在页面的 JavaScript 文件中，定义一个函数 showPopupLayer() 来显示弹出层。

function showPopupLayer() {
  // 显示弹出层
  this.setData({
    'popupLayer.show': true
  })

  // 禁止下层页面滑动
  wx.pageScrollTo({
    scrollTop: 0,
    duration: 0
  })
}

4. 在页面的 JavaScript 文件中，定义一个函数 hidePopupLayer() 来隐藏弹出层。

function hidePopupLayer() {
  // 隐藏弹出层
  this.setData({
    'popupLayer.show': false
  })

  // 允许下层页面滑动
  wx.pageScrollTo({
    scrollTop: 0,
    duration: 300
  })
}

5. 在页面的 JavaScript 文件中，调用 showPopupLayer() 和 hidePopupLayer() 函数来控制弹出层的显示和隐藏。

Page({
  data: {
    popupLayer: {
      show: false
    }
  },
  showPopupLayer: function() {
    this.showPopupLayer()
  },
  hidePopupLayer: function() {
    this.hidePopupLayer()
  }
})

通过以上步骤，即可实现当打开弹出层时，下层页面不可滑动。

需要注意的是，在某些情况下，可能需要对上述步骤进行一些调整。例如，如果弹出层的内容需要滚动，则需要在弹出层的样式中设置 overflow-y: scroll;。另外，如果希望在弹出层显示时，下层页面可以滚动到顶部，则可以在 showPopupLayer() 函数中调用 wx.pageScrollTo() 方法，将滚动条滚动到顶部。