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

图一：

图二：

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

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

 

转载于:https://www.cnblogs.com/yangmeili/p/10022247.html