需求
通过在url上加参数或点击页面上的icon可以滑动到指定的位置
原方案
vue项目,在初始数据加载完后判断url上是否有定位参数,有则在this.$nextTick内调用如下函数。
toPosition() {
this.$nextTick(() => {
document.querySelector('.line').scrollIntoView({block: 'start', behavior: 'smooth'});
});
},
点击icon也是调用如上函数
问题
指定位置以上有图片,未加载完时有占位图,是默认高度。当图片加载完后,高度自适应(高度不固定)。所以,当先定位,再图片加载完时,图片自适应高度如果大于默认高度,则指定位置会被图片挤下去。
解决方案
图片默认是默认高度,只有满足以下条件,才换成自适应高度的样式。(以下条件是 且 的关系)
- 图片加载完成
- 没有执行过toPosition 或者 执行过toPosition且用户已滑动过页面
this.imgOneLoaded && (!this.toPositioned || this.touchMove);
注意
- 在PC上不行,PC上没法区分是用户滚动页面还是程序滚动了页面(即没法得到准确的this.touchMove)
- 滑动时图片刚好加载完还是会有闪一下的效果
求教
各位有更好的方案,不妨留个言~