Vue项目开发中遇到的问题（1）：图片还没加载完，导致跳转位置出错

问题描述

按按钮的时候，页面不能跳转到所在的位置

比如正确的位置应该是这样的

但却显示成了这样

---

原因分析：

这是由于在获取位置信息的时候，图片还没有加载渲染完毕，页面不能正确获取各模块最后真正的高度，导致跳转位置错误。

---

尝试过的解决方法

1.在created()中添加获取位置方法

	但是在vue的生命周期里面，created()的时候DOM元素还没有完成挂载，
	所以$refs和$el拿不到相应的组件，会导致完全无法获取各模块的位置信息
	且只能获取一次

2.在mounted()中添加
	已经拿到了data和方法，并且在mounted中DOM也已经被挂载了
	但由于获取图片是异步操作，所以图片是还没有完全被请求过来的
	而获取位置的方法就已经执行了，且只能执行一次,所以是位置信息依然是错的

解决方案：

方法：在监听上拉的事件中添加获取位置方法

在监听上拉事件和按钮跳转事件中同时添加获取位置的方法，并用数组将位置信息存起来。

此时还有个问题，按钮和上拉不可能只触发一次，那么哪个位置信息才是正确的呢？

可以将存放位置信息的空数组从data中搬到获取位置的方法中，这样每次执行该方法都会将数组重置，从而始终只保留各模块的正确（而不会重复）

还有一个问题，如果每次上拉或点击都会执行该方法，那岂不是会很浪费内存，运行效率？

此时则可以通过防抖或者节流函数，来节省操作