小程序自定义弹层禁止页面滚动方案详解

方案一：通过小程序自定义组件 scroll-view 实现布局，动态修改 scroll-y 属性

组件及属性介绍： developers.weixin.qq.com/miniprogram…

缺点： 布局局限于 scroll-view 组件， 大部分需求都满足不了。

方案二：自定义弹层蒙层或者外层容器添加 catchtouchmove 事件

<view class="mask-box" catchtouchmove="preventTouchMove">
    <!--弹层内容-->
</view>

缺点： 弹层滑动不了；适用于自定义弹层不需要滑动的需求。

方案三：动态添加给最外层元素增加 position:fixed 样式

<view style="{{isMask ? 'position:fixed; top: 0; left: 0;' : ''}}">
  <!--内容区-->
</view>

缺点： 当自定义弹层显示时，底层页面始终会回到顶部；体验不好也过不了测试这关。

方案四：通过动态修改样式处理 （推荐）

原理： 小程序没提供 API 给我们动态修改 page 样式， 那我们换个思路，最开始给 page 设置 overflow: hidden, 最外层布局设置 overflow: auto 但是设置 height 属性时还是有坑。 如下：

• height: 100vh 时，上拉加载、下拉刷新在安卓端失效，ios没问题； 适用于当前页面不需要上拉、下拉刷新；

• page 设置 overflow: hidden 时， 安卓端页面整体滑动不了； 适用于底层布局不需要滑动；

• page 设置 overflow: visible ， 以上问题均能解决 （推荐）；

代码如下： wxml:

<view class="content {{isMask? 'page-hidden' : ''}}">
    <!--内容区-->
</view>

wxss:

page {
  overflow: visible;
  height: 100%;
}
.content{
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.page-hidden{
  overflow: hidden
}

若有疑问欢迎留言指正