评论

如何彻底解决小程序滚动穿透问题

解决微信小程序滚动穿透的终极方案。

前言:我们在开发业务的过程中总会有各种样式的弹窗需求,在弹窗弹起来的时候,底部的内容却可以滚动,刚开始我们使用catchtouchmove解决了,但是在复杂一点的情况下还是会导致滚动穿透。今天分享一个永久解决该问题的方法。

使用官方的page-meta组件,这里贴下官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html

通过该组件我们可以直接操作Page组件 ,我们给它的wxss样式overflow动态设置hiddenorvisibleorauto 就可以控制整个页面是否可以滚动。

示例代码:

<page-meta page-style="overflow: {{visible ? 'hidden' : 'visible'}}" />
<button class="button" bindtap="handleClick">点我弹出弹窗</button>
<!-- 模拟页面滚动 -->
<view wx:for="{{300}}" wx:key="index">{{item}}</view>
<!-- 模拟弹窗 -->
<view class="dialog-wrap {{visible ? 'active' : ''}}">
  <view class="dialog-back {{visible ? 'active' : ''}}"></view>
  <view class="share-box-container {{visible ? 'active' : ''}}">
    <view class="share-content">
      <!-- 模拟弹窗内容滚动 -->
      <view class="share-box" wx:for="{{300}}" wx:key="index">{{item}}</view>
    </view>
  </view>
</view>
控制弹窗显隐藏:
const app = getApp()

Page({
  data: {
    visible: false
  },
  onLoad() {
   
  },
  handleClick() {
    this.setData({
      visible: !this.data.visible
    })
  }
})
wxss弹窗样式太多,这里就不贴,放代码片段里了。

兼容底部是scroll-view,以及弹窗内是scroll-view都不会穿透影响底部的内容。

老规矩,结尾放代码片段:

https://developers.weixin.qq.com/s/U6ItgQmP7upQ

最后一次编辑于  2021-10-08  
点赞 21
收藏
评论

11 个评论

  • lzj
    lzj
    2021-12-13

    跟 web 里面的 Helmet 组件有点儿类似,可以用来修改 page-meta 信息。

    2021-12-13
    赞同 1
    回复
  • Stella
    Stella
    2021-10-19

    page-meta 组件在 iPhone8 上无效,大佬们有遇到这种兼容问题吗?

    2021-10-19
    赞同 1
    回复 19
    • 一壶炊烟煮黄昏
      一壶炊烟煮黄昏
      2021-10-20
      查看下你的微信客户端版本是多少,再看对应的基础库是多少。这个组件有最低基础库限制的
      2021-10-20
      回复
    • Stella
      Stella
      2021-10-20回复一壶炊烟煮黄昏
      好的,我看下,感谢回复。
      2021-10-20
      回复
    • Stella
      Stella
      2021-10-20回复一壶炊烟煮黄昏
      手机微信升级到最新版本8.0.15,调试基础库为2.20.0。还是没生效
      2021-10-20
      回复
    • 一壶炊烟煮黄昏
      一壶炊烟煮黄昏
      2021-10-20回复Stella
      提供代码片段看下。我看下你是不是写错了。。。
      2021-10-20
      回复
    • Stella
      Stella
      2021-10-20回复一壶炊烟煮黄昏
      2021-10-20
      回复
    查看更多(14)
  • yimi🌸
    yimi🌸
    2021-10-15

    弹窗弹出时,直接把底部的scroll-view的scroll-y设置为false,就可以阻止底层滚动了呀,不需要用这个page-meta吧

    2021-10-15
    赞同 1
    回复 2
    • 一壶炊烟煮黄昏
      一壶炊烟煮黄昏
      2021-10-15
      底部内容超出一屏。弹窗内有滚动会导致滚动穿透。而这个组件的作用跟 h5的控制body设置为overflow hidden控制底部不可滚动 是一样的原理。
      2021-10-15
      回复
    • yimi🌸
      yimi🌸
      2021-10-18回复一壶炊烟煮黄昏
      哦,我知道了,我以为最外层结构是scroll-view,没看清。这个的确是最佳方法👍
      2021-10-18
      回复
  • 困难
    困难
    2021-10-08

    感谢大佬。之前用catchtouchmove解决,后来弹窗变复杂就突然不好使了。。这个方法确实简单快捷

    2021-10-08
    赞同 1
    回复
  • 悦己
    悦己
    2021-07-15

    麻烦问下pageMeta在taro中怎么使用啊?

    2021-07-15
    赞同 1
    回复 2
    • 夜 惊 魂
      夜 惊 魂
      2021-08-03
      请问你解决了嘛😂
      2021-08-03
      回复
    • Gavin
      Gavin
      2021-08-24
      Taro有个方法你可以看看
      2021-08-24
      1
      回复
  • 陈关羽
    陈关羽
    2021-05-31

    老哥 这个方法很稳

    2021-05-31
    赞同 1
    回复
  • 来一间
    来一间
    2021-05-14

    https://developers.weixin.qq.com/community/develop/article/doc/000e40918dc420f5f61c2001a56013,这一篇写得特别详细,楼主也可以看看!

    2021-05-14
    赞同 1
    回复 1
    • HGP
      HGP
      2021-05-19
      这个链接是广告,然后这个层主是s13
      2021-05-19
      12
      回复
  • 你好耀眼。
    你好耀眼。
    2021-06-07

    很奈斯,正好遇到catchtouchmove不好用的情景了

    2021-06-07
    赞同
    回复
  • H
    H
    2021-05-13

    nice 很不错,用了感觉挺好

    2021-05-13
    赞同
    回复
  • 蟑螂恶霸
    蟑螂恶霸
    2021-05-12

    良心帖子,我现在就去试

    2021-05-12
    赞同
    回复

正在加载...

登录 后发表内容