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

【春哥博客技术教程分享】在开发小程序的过程中,如何解决小程序自定义弹层禁止页面滚动,解决滚动穿透问题,春哥团队技术虎子分享如下方案:
方案一:通过小程序自定义组件 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
}
复制代码

如果有更多解决方法或疑问,欢迎在春哥技术源码论坛留言、交流!!


 

来源:春哥技术博客,欢迎分享,(春哥微信号:cgnanyin)
上一篇:微信小程序的支付功能如何实现?详解来      下一篇:很抱歉没有了