scroll-view 某些机型不触发 bindscrolltolower
之前关于这个问题的帖子沉了, 但是由于问题仍然存在所以我重新发一篇, 我这边在 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的