WRM
0%

联动效果——点击标题滚动到对应的内容

发表于 分类于

基本思想：当页面加载完成后，点击标题后，获取对应标题内容的offsetTop值，利用scroll的scrollTo滚动到相应位置

给各组件添加ref属性

便于获取标题所对应的组件

新添加data成员

1. 添加data成员

类型：空数组（存储各个组件的offsetTop值）

2. 获取各标题对应的内容的offsetTop，并将其推入数组

获取offsetTop的值出现错误的原因：

（1）DOM还未渲染完成
（2）DOM已经渲染成，但是组件中的图片还没有加载出来

实现

为了避免出现以上问题，所以在DOM渲染完成并且图片已加载的情况下调用各个函数：

  1. 子组件
1
2
3
4
<div class="info-list">
  <img v-for="(item, index) in detailInfo.detailImage[0].list" 
  :key="index" :src="item" @load="imgLoad" alt="">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
methods: {
    imgLoad() {
       // 判断, 所有的图片是否都加载完成, 如若加载完成进行一次回调就可以了.
       if (++this.counter === this.imagesLength) {
         this.$emit('imageLoad');
       }
    }
   },
   watch: {
    detailInfo() {
      // 获取图片的个数
    	this.imagesLength = this.detailInfo.detailImage[0].list.length
    }
   }
  1. 父组件
    监听子组件传递出的事件
    在这里插入图片描述
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 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();
   },
 },

标题点击触发事件

1
2
3
4
5
6
7
8
9
10
methods: {
  detailImageLoad() {
    this.$refs.scroll.refresh();
    this.getThemeTopY();
  },
  titleClick(index) {
    this.$refs.scroll.scrollTo(0, -this.themeTopY[index]);
    // console.log(index);
  },
},

注意：如果标题点击事件的监听是由子组件完成，需要由子组件传递给父组件

1
2
3
4
5
//子组件
itemClick(index) {
      this.currentIndex = index;
      this.$emit("itemClick", index);
    },
1
2
//父组件
<detail-nav-bar class="detail-nav-bar" @itemClick="titleClick"></detail-nav-bar>