在开发微信小程序的过程中，有时我们需要实现一个功能：当弹窗显示时，禁止下层内容的滚动，以确保用户的注意力集中在弹窗上。本篇将详细介绍两种实现这一功能的方法。
### 方法一：利用`position: fixed`
#### 1. 页面结构
在HTML布局中，我们可以将整个页面包裹在一个`view`组件内，并根据`proInfoWindow`状态添加或移除`indexFixed`类。当`proInfoWindow`为`true`时，添加`indexFixed`类，使得下层内容变为固定定位，从而禁止滚动。
```html
<view class="indexPage {{proInfoWindow ? 'indexFixed' : ''}}">
<!-- 此处为整个页面的结构内容 -->
<button catchTap="_proInfoWindowShow">点击显示弹窗</button>
</view>
<!-- 弹窗内容 -->
<view wx:if="{{proInfoWindow}}">此处为弹窗内容</view>
```
#### 2. CSS 部分
为`indexFixed`类设置`position: fixed`以及`left`, `right`, `top`, `bottom`属性，使其覆盖整个屏幕，达到禁止下层内容滚动的效果。
```css
.indexFixed {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
```
#### 3. JavaScript 部分
在Page对象中，定义数据属性`proInfoWindow`为`false`，并编写`_proInfoWindowShow`方法，点击按钮时设置`proInfoWindow`为`true`，同时添加`indexFixed`类，关闭弹窗时移除。
```javascript
Page({
data: {
proInfoWindow: false,
},
_proInfoWindowShow() {
this.setData({
proInfoWindow: true,
});
},
});
```
### 方法二：使用`catchtouchmove="return"`
这种方法通过在需要禁止滚动的元素上添加`catchtouchmove="return"`属性，阻止其内部的触摸滚动事件。为了确保列表仍然可以滚动，需将`catchtouchmove="return"`仅应用于不需要滚动的区域。
```html
<!-- 弹窗内容 -->
<view catchtouchmove="return">
<!-- 外层加 catchtouchmove="return"仅触摸背景区域时不穿透底部 -->
<!-- 在每个小的区域内加 catchtouchmove="return" -->
<view catchtouchmove="return"></view>
<!-- 有需要滚动的列表区域位置不要加 catchtouchmove="return" -->
<view>
<view>滚动列表1</view>
<view>滚动列表2</view>
<view>滚动列表3</view>
<view>滚动列表4</view>
</view>
</view>
```
总结：这两种方法都能有效实现小程序中弹窗出现时下层内容禁止滚动的需求。第一种方法通过CSS样式改变实现全局禁止滚动，适合于整个页面都需要禁止滚动的情况；第二种方法利用事件监听，更加精确地控制了哪些区域禁止滚动，更适合有局部滚动需求的场景。在实际开发中，应根据项目需求选择合适的方法。
