顶部状态栏点击 页面滑动到指定位置 之 开始无法正确获取位置信息问题

1  点击goodsitem  跳转到详情页 利用动态路由携带goods.iid;

2  跳转到详情页 ， 组件开始创建 ；created请求数据 ;数据传递到子组件  商品图片展示组件；

3  当图片加载完后通过  this.$refs.().$el.offstTop 获Dom元素的offsetTop ，只有等最后一张图片加载完之后才能获取准确的高度   mounted；nexttick() 获取的都不准

　　offsetTop：元素到offsetParent顶部的距离 ；

　　offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。

4  获取到每个组件模板的offsetTop后；每个状态标签通过 click事件 触发 scroll.to(x,y,dealy)  滑动到相应位置；

5  再通过 监听滚动位变化  与状态栏 一 一对应；

  问题：进入详情页就点击状态栏标签    但此时由于 展示图片还没加载出来；高度计算不准确；导致滑动距离错误

　解决办法：在图片还没加载完时，状态栏标签点击无效；

　　1 通过props将保存高度的数组传递到 状态栏组件中；

 

 

　　2 在状态点击事件函数中；判断数组长度是否为4 ；不为4 则 return ；为4则触发事件回调函数；　　　　　

 　　itemClick(index){      　　 if(this.themeTopYs.length !== 4){        　　 return     　　  }      　　 this.currentindex = index;      　　 this.$emit('itemClick',index);    　 },

6  只针对于一进入详情页就开始点击状态栏  ，若等待一会儿再点击则不存在上述问题；

 

标签：状态栏,位置,点击,详情页,offsetTop,组件,加载,页面
来源： https://www.cnblogs.com/chen-da-da/p/15227830.html