收藏
回答

scroll-view 触底事件不触发?

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 微信安卓客户端 7.10.18.1740 2..13.0

问题:开发者工具正常、真机不正常

真机参数:

System: Android 9, WeChat 7.0.18.1740

Network: wifi

UA: Mozilla/5.0 (Linux; Android 9; Redmi Note 5 Build/PKQ1.180904.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/67.0.3396.87 XWEB/1169 MMWEBSDK/200801 Mobile Safari/537.36 MMWEBID/9357 MicroMessenger/7.0.18.1740(0x27001239) Process/appbrand2 WeChat/arm64 NetType/WIFI Language/zh_CN ABI/arm64

WeChatLib: 2.13.0 (2020.9.10 16:07:53)

操作:直接下划到底部




另:此类型真机的下拉刷新也不正常,本想去掉下拉刷新改成双击标题栏,今天发现触底也不正常

https://developers.weixin.qq.com/community/develop/doc/0004c8d9488260c5feea2339e56800

最后一次编辑于  2020-09-11
回答关注问题邀请回答
收藏

7 个回答

  • fish
    fish
    2022-10-27

    可以参考下,我用的是Taro

    /**
       * onScrollToLower 的触发条件为 scrollTop + viewHeight + props.threshold >= scrollHeight
       * onScroll 监听的上面的条件不成立 也无法 触发 onScrollToLower,
       * 
       * 滑动过快 或页面列表元素 高度还没渲染出来,导致此 bug
       * 一种办法是 我们可以可以等页面渲染完成,延迟去 querySelect 元素的位置/尺寸 去判断是否抵达底部;
       * 另一种我们 增加一个 larger threshold 去判断,让距离底部更高的位置触发 onScrollToLower
       * 很多回答说把 lower-threshold 增大是可以部分解决的,但是我们又不希望距离太高就去触发 onScrollToLower,
       * 所以当 onScrollToLower 无法触发,而使用 larger threshold 可以触发时,我们手动触发一次 onScrollToLower
       * 
      */
    const onScroll = ({ detail: { scrollTop, scrollHeight } }) => {
      const largerThreshold = viewHeight * 3 / 4; // 距离底部距离 列表的 3/4
      const originScrollHeight = scrollTop + viewHeight + props.threshold;
      const largerScrollHeight = scrollTop + viewHeight + largerThreshold;
      if (largerScrollHeight >= scrollHeight && originScrollHeight < scrollHeight) {
        onScrollToLower();
      }
    };
    
    2022-10-27
    有用
    回复
  • Moonies
    Moonies
    2021-06-03

    触底事件确实不灵敏 而且不一定什么时候不灵敏...

    2021-06-03
    有用
    回复
  • 夜夏
    夜夏
    2020-12-17

    如果是在滑动过快的情况下触底事件不触发,可以把lower-threshold的距离调大一些,比如150px

    2020-12-17
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2020-09-11

    你好,scroll-view需要加个固定高度的。

    2020-09-11
    有用
    回复 3
    • 🍀Bai
      🍀Bai
      2020-09-12
      必须直接指定height吗?不支持用flex-grow自动撑满么?
      2020-09-12
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2020-09-12回复🍀Bai
      使用竖向滚动时,需要给scroll-view一个固定高度
      2020-09-12
      1
      回复
    • 凡思
      凡思
      2020-10-12
      我真的迷了  我触底也不好使,某度搜出来CSDN好多文章都说scroll-view去掉高度就行了,但是你这边却说要给一个固定高度 我到底信谁的  反正我是测试 只要去掉固定高度就行了  我把所有scroll-view的高度都改成margin-top
      2020-10-12
      回复
  • .
    .
    2020-09-11

    我这边工具测试和真机都是可以的

    2020-09-11
    有用
    回复 3
    • 🍀Bai
      🍀Bai
      2020-09-11
      找同事用Android10试了一下,真机正常;不知道是安卓9的问题还是红米note5这个机型的问题
      2020-09-11
      回复
    • .
      .
      2020-09-11回复🍀Bai
      你也可以用view标签 然后用微信小程序给你的原生方法, 
      onPullDownRefresh: function() {
          // 触发下拉刷新时执行
        },
        onReachBottom: function() {
          // 页面触底时执行
        },
      在json里配置下面这个,下拉刷新参数
       enablePullDownRefresh:true,
      2020-09-11
      回复
    • 🍀Bai
      🍀Bai
      2020-09-11回复.
      线上版本是顶部有固定的搜索和标签页,中间是scroll-view。线上是用flex写的,同一个手机昨天升级微信后就不好使了。不知道官方会不会关注到。
      2020-09-11
      回复
  • 睡前原谅一切
    睡前原谅一切
    2020-09-11

    IOS是否正常。

    2020-09-11
    有用
    回复
  • 迷失的故渊
    迷失的故渊
    2020-09-11

    帮你试了一下 是好的 你工具不是最新版吧

    2020-09-11
    有用
    回复 3
    • 🍀Bai
      🍀Bai
      2020-09-11
      我的开发者工具也是正常,好像只有部分真机不正常,比如我的。。。不知道具体受影响范围是哪些。
      2020-09-11
      回复
    • 迷失的故渊
      迷失的故渊
      2020-09-11回复🍀Bai
      微信版本的问题吧
      2020-09-11
      回复
    • 晊恦°
      晊恦°
      2020-11-17
      你给scroll-view固定高度了吗,不固定高度不行
      2020-11-17
      回复
登录 后发表内容
问题标签