页面滚动组件scroll不能正确获取高度的问题如何解决

图一:

图二:

图二源码的页面显示为图一,在这里有一个获取到数据后,scroll有时滚动高度不正确的问题。在这个滚动中有两部分内容,第一部分是slider焦点图区域,第二部分是热门歌单推荐列表部分,这两部分的数据内容分别从两个接口中获取,因为网络速度的原因,所以接口获取数据的速度不一致,而且先后也存在不确定性,如果第一部分的数据先获取,页面先渲染,那么页面高度不会存在什么问题,但如果第二部分先获取到数据渲染完页面,此时的页面高度就不准确,滚动就出现问题了。

我听老师的讲的时候,提到过利用计算属性,讲两者的数据生成一个新的data,监听这个新的data数据的变化就可以了,这个方法在后面搜索功能中确实也是这样用到了,在那个地方使用没有任何问题,但是这个地方就会出现问题,老师说了因为这里的第一部分是图片滚动列表,不是数据加载完就可以了(因为图片的高度根据页面的宽度变化,即使图片数据加载完,图片还没有渲染完,那slider的高度就还没有获取到,图片的渲染要比文字的渲染速度慢),要等到图片加载结束之后,刷新scroll这个组件才能获取正确的页面高度,所以我们就需要监听图片的加载事件,另外不需要所有的图片都加载完,只需监听第一张图片是否加载完就可以了。

 

posted @ 2018-11-26 19:10  虚怀若渊谷  阅读(941)  评论(0编辑  收藏  举报