【春哥博客技术教程分享】在开发小程序的过程中,如何解决小程序自定义弹层禁止页面滚动,解决滚动穿透问题,春哥团队技术虎子分享如下方案:
方案一
通过小程序自定义组件 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>
复制代码
缺点: 当 isMask 为 true 时,页面始终会回到顶部;体验过不了关;
方案四
通过动态修改样式处理 (推荐)
原理: 小程序没提供 API 给我们动态修改 page 样式, 那我们换个思路,最开始给 page 设置overflow: hidden , 最外层布局设置 overflow: auto 但是设置 height 属性时还是有坑。
如下:
height: 100vh 时,上拉加载、下拉刷新在安卓端失效,ios没问题; 适用于当前页面不需要上拉、下拉刷新
page 设置 overflow: hidden 时, 安卓端页面整体滑动不了; 适用于底层布局不需要滑动
page 设置 overflow: visible , 以上问题均解决 (推荐)
代码如下: wxml:
view class="content {{isMask? 'page-hidden' : ''}}">
wxss:
page {
overflow: visible;
height: 100%;
}
.group-buying-list{
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.page-hidden{
overflow: hidden !important;
}
转自 https://www.cgtblog.com/wx/3636.html