解决Vue项目中使用better-scroll在下拉加载页面后出现滑动卡顿问题

项目场景：

在vue项目中使用better-scroll解决原生滑动不够顺滑的问题，但在下拉加载更多数据时，出现无法下拉，滑动卡顿，但是稍微等一会，就又可以正常下拉滑动

---

原因分析：

出现该现象的原因是由于better-scroll中的一个属性：scrollerHeight

• better-scroll在决定有多少区域可以滚动时，是根据scrollerHeight属性决定的
• scrollerHeight属性是根据放在better-scroll中子组件的高度决定的
• 但在刚下拉加载时，由于图片加载速度较慢，所以scrollerHeight计算的结果是少于实际高度的，就会导致拉到一定高度无法下拉的情况。但是等待一会，图片加载完毕，scrollerHeight变成实际高度，就又可以正常滚动

---

解决方案：

解决方法就是监听每一张图片的加载。然后在每张图片加载完成手动刷新scrollerHeight的数值

• vue中使用@load="方法"实现对图片监听

<img :src="goodsListItem.sh