基本思想:当页面加载完成后,点击标题后,获取对应标题内容的offsetTop值,利用scroll的scrollTo滚动到相应位置
给各组件添加ref属性
便于获取标题所对应的组件
新添加data成员
1. 添加data成员
类型:空数组(存储各个组件的offsetTop值)
2. 获取各标题对应的内容的offsetTop,并将其推入数组
获取offsetTop的值出现错误的原因:
(1)DOM还未渲染完成
(2)DOM已经渲染成,但是组件中的图片还没有加载出来
实现
为了避免出现以上问题,所以在DOM渲染完成并且图片已加载的情况下调用各个函数:
- 子组件
<div class="info-list">
<img v-for="(item, index) in detailInfo.detailImage[0].list"
:key="index" :src="item" @load="imgLoad" alt="">
</div>
methods: {
imgLoad() {
// 判断, 所有的图片是否都加载完成, 如若加载完成进行一次回调就可以了.
if (++this.counter === this.imagesLength) {
this.$emit('imageLoad');
}
}
},
watch: {
detailInfo() {
// 获取图片的个数
this.imagesLength = this.detailInfo.detailImage[0].list.length
}
}
- 父组件
监听子组件传递出的事件
mounted() {
// 获取相应的offsetTop值并保存在themeTopY中
// 将此函数进行防抖处理
this.getThemeTopY = debounce(() => {
this.themeTopY.push(0);
this.themeTopY.push(this.$refs.params.$el.offsetTop);
this.themeTopY.push(this.$refs.comment.$el.offsetTop);
this.themeTopY.push(this.$refs.recommend.$el.offsetTop);
console.log(this.themeTopY);
});
},
methods: {
detailImageLoad() {
this.$refs.scroll.refresh();
//调用
this.getThemeTopY();
},
},
标题点击触发事件
methods: {
detailImageLoad() {
this.$refs.scroll.refresh();
this.getThemeTopY();
},
titleClick(index) {
this.$refs.scroll.scrollTo(0, -this.themeTopY[index]);
// console.log(index);
},
},
注意:如果标题点击事件的监听是由子组件完成,需要由子组件传递给父组件
//子组件
itemClick(index) {
this.currentIndex = index;
this.$emit("itemClick", index);
},
//父组件
<detail-nav-bar class="detail-nav-bar" @itemClick="titleClick"></detail-nav-bar>