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

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

给各组件添加ref属性

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

新添加data成员

1. 添加data成员

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

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

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

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

实现

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

1. 子组件

    <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
	    }
    }

2. 父组件
   监听子组件传递出的事件
   

  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>