【微信小程序】弹窗如何防止滚动穿透？

上图是项目中的一个商详页面，可以看到当打开购买弹窗时，在弹窗界面上触摸滑动会出现穿透效果使得弹窗下的界面也跟着滑动，很显然，这种体验很不好，下面给出我的解决方案：

方案一：阻止弹窗touchmove事件

关键代码：

// 返回一个空函数
@touchmove.stop.prevent="() => {}"
复制代码

缺点：此方案会弹窗的界面无法滚动，如果弹窗界面确定没有滚动可以使用该方案，但我这个弹窗界面如果sku比较多时会有滚动操作微信小程序弹出层，所以方案一pass。

方案二：打开弹窗时，页面的最外层设置一个高度，溢出时隐藏，关闭弹窗后再去掉该设置

.wrapper{
    heigth: 100vh;
    overflow: hidden;
}
复制代码

缺点：当页面滑动一定距离后再打开弹窗时，页面会滚动回顶部，体验比较差。当然这个问题也是可以解决的，监听页面滚动，记录滚动条位置微信小程序弹出层，关闭弹窗的时候再恢复到原来的位置。该方案比较繁琐，所以不在我的考虑之内，方案二pass。

终极方案：利用小程序自带的scroll-view组件

思路：将整个页面包裹在scroll-view之内，在打开弹窗的时候设置scroll-y为false，关闭弹窗时恢复为true。

<template>
  <scroll-view :scroll-y="!disableScroll" style="height:100vh">
    <div class="page">
        ...
    div>
  scroll-view>
template>
复制代码

注意：scroll-view需要设置高度

可以看到，既不会滚动穿透也不会在打开弹窗的时候页面回到顶部，这种方案代码量少，也不需要进行滚动监听等繁琐的操作。