前言
本篇文章概述:上拉刷新请求数据,better-scroll无法滚动的解决方法
一、上拉刷新请求数据
代码如下(示例):
回到home组件找到之前我们请求数据的这个方法。
因为better-scroll的上拉刷新默认只加载一次,那么我们就需要再每次上拉刷新请求完一次后,调用一次finishPullUp(),告诉better-scroll已经加载完成了,才能够正常调用上拉加载更多的方法
this.$refs.scroll.finishPullUp() //this.$ref.scroll表示获取到 ref = 'scroll'这个DOM元素
这样我们就实现上拉加载更多了,下面是动态图展示,我们也可以看右侧‘pop’中的list和page数据的变化
二、better-scroll无法滚动的解决方法
1.产生bug的原因
整个页面在加载的过程中,图片还没有刷新,子容器的高度还没达到预期的高度,但是better-scroll已经计算好了可滚动区域,图片还没加载出来时,子容器的高度很小,导致滚动区域也很小,所以会发生无法滚动的bug。
2.解决方案
代码如下(示例):
找到goodsListItem组件中的图片,绑定一个@load,表示图片加载完成后调用这个方法
因为goodsListItem和home不是父子组件关系,所以通过$bus事件总线的方式将这个方法传给home组件
imgRefresh(){
this.$bus.$emit("imgRefresh")
}
最后只需要在home组件中调用一下better-scroll的refresh方法重新定义一下正确容器的高度,就可以恢复正常的滚动啦。