html52.com
我爱小程序-开发者交流社区

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的

网友回复

叶無魂:

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

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

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付