标签：状态栏 位置 点击 详情页 offsetTop 组件 加载 页面

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。