收藏
回答

scroll-view 某些机型不触发 bindscrolltolower

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 工具 7.0.5 2.8.3

之前关于这个问题的帖子沉了, 但是由于问题仍然存在所以我重新发一篇, 我这边在 Mac 开发者工具 1.02.1907300 上会出线这个问题, 具体安卓一加5T也会有这种情况(这个是别人反馈的). 具体发生原因经我测试如下:

具体问题解析链接



我这边测试 iphoneX 没有问题, Mac 上的微信开发者工具有问题, 安卓目前没有测试机器.

问题具体表现为: 有概率不触发 bindscrolltolower 事件.

同理使用 bindscroll 事件去实现触底加载, 同样有大概率不触发事件. 具体实现:

scroll(e) {
	console.log(e.detail.scrollTop)
	if(e.detail.scrollTop + scrollView高度 == e.detail.scrollHeight) {
		if (!this.properties.end) {
			this.setData({
				mode: 'more'
			})
			this.triggerEvent('more');
		}
	}
}

这里通过打印 scrollTop 的值发现, 在 scroll-view 滑动到底部时 scrollTop 的值并未达到最大, 导致
e.detail.scrollTop + scrollView高度 == e.detail.scrollHeight 等式不成立. 这里可以判断微信自身 bindscrolltolower 事件也是用类似这个条件去触发的. 所以也会有同样的问题.

还有上述的 往下拉再上拉,就会加载出来了 这种情况是因为, scroll-view 已经触底了, 继续向下滑动因为已经到底了所以不会触发 scroll 事件自然也就不会触发 bindscrolltolower, 然后表现就是卡住了. 但是往下拉再上拉后会重新触发scroll事件, 并且这种情况 scrollTop 大概率都不会出问题, 可能是滑的慢也可能是滑的距离短, 反正就是能触发. 基本上我上网看了, 这个问题目前好像无解, 只能坐等微信修复了(ps: 建议去微信小程序社区反馈, 目前的反馈看了大部分都没说清楚问题 ).

这里提供一种不太优的解决方案, 但是至少在不能滑的机器上能滑了:

scroll(e) {
	clearTimeout(this.timer)
	this.timer = setTimeout(() => {
		this.setData({
			scrollTop: e.detail.scrollTop
		})
	}, 100)
}

具体原理就是设置 scroll-view 的 scrollTop 为最后一次触发 scroll 事件中的 scrollTop. 这样就不会出现看似到底其实没到, 然后不触发事件. 但是有些 scroll 事件失效比较多的时候体验可能就比较差了, 一两次的基本都还好. 还有这里也不会影响正常的机型



这里还是希望官方能解决这个问题, 虽然上述解决方案可以应付但是效果还是很不ok的

回答关注问题邀请回答
收藏

3 个回答

  • wynn
    wynn
    2022-11-23

    遇到了同样的问题,我是设置的横向滚动,lower-threshold='1' @scrolltolower="scrolltolower" ios正常,安卓手机必现,滑动到最右边时触发一个方法,每次都是要往左边滑一下再滑动到最右边才触发。有没有好的解决方法

    2022-11-23
    有用
    回复
  • 是小白啊
    是小白啊
    2019-10-21

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-10-21
    有用
    回复 6
    • f
      f
      2019-10-21
      Mac 开发者工具 1.02.1907300,以及安卓一加5T(具体版本型号未知),代码片段稍等
      2019-10-21
      回复
    • f
      f
      2019-10-21
      代码片段 https://developers.weixin.qq.com/s/WVBnYhmN7Tc0
      2019-10-21
      回复
    • zhang@h
      zhang@h
      2019-12-16
      华为部分手机也是
      2019-12-16
      回复
    • zhang@h
      zhang@h
      2019-12-16
      我用flex布局,overflow-y:auto
      2019-12-16
      回复
    • 木木彡木木彡
      木木彡木木彡
      2020-05-09
      问题解决了嘛?
      2020-05-09
      回复
    查看更多(1)
  • 叶無魂
    叶無魂
    2019-10-21

    <scroll-view scroll-y="true" class="scoll-h" lower-threshold='1' bindscrolltolower='lower'>

    我直接设置了lower-threshold='1' 设置为0的时候触发也会有问题  没有在函数中判断使用过程中Android ios 表现良好

    2019-10-21
    有用
    回复 9
    • f
      f
      2019-10-21
      设置为0和1都一样,scrollTop 不能和 scroll 事件不能正确响应的机器上,都会发生这种效果,不过好像开发者工具比较明显,某些安卓机上也会发生
      2019-10-21
      回复
    • 叶無魂
      叶無魂
      2019-10-21回复f
      可能我们做的不一样吧,我的这种是没问题的
      2019-10-21
      回复
    • f
      f
      2019-10-21回复叶無魂
      这是模拟器么,我刚试了下1的情况发生概率小但还是有,你是windows 还是mac上的模拟器
      2019-10-21
      回复
    • 叶無魂
      叶無魂
      2019-10-21回复f
      我是真机
      2019-10-21
      回复
    • f
      f
      2019-10-21
      真机大部分是ok的,只是考虑某些特别的机器可能会发生
      2019-10-21
      回复
    查看更多(4)
登录 后发表内容
问题标签