0
点赞
收藏
分享

微信扫一扫

Vue项目开发中遇到的问题(1):图片还没加载完,导致跳转位置出错

Go_Viola 2022-04-19 阅读 18
vue.js

问题描述

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

比如正确的位置应该是这样的
在这里插入图片描述
但却显示成了这样
在这里插入图片描述


原因分析:

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


尝试过的解决方法

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

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

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

解决方案:

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

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

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

举报

相关推荐

0 条评论