点击标题，滚动到对应的主题

十一. 推荐数据的战术
** 请求推荐数据
** GoodsList展示数据

十二. mixin的使用
** 创建混入对象
** 组件对象中: mixins: [mixin]

1. 联动效果;
2. 底部工具栏，点击加入购物车
3. 回到顶部，也可以用混入的方式进行封装

购物车

十三. 处理两个bug

1. 首页tabControl
2. 详情滚动的bug

十四. 标题和内容的联动效果

14.1 点击标题 滚动到对应的主题

P106. 数据更新的时机

// 值压根就没有被渲染
this.themeTopYs = [];

          this.themeTopYs.push(0);
          this.themeTopYs.push(this.$refs.param.$el.offsetTop);
          this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
          this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);

          console.log(this.themeTopYs);
        
this.$nextTick(() => {
// 值不对的原因是因为图片没有被计算在内
          // 渲染线程和js代码执行线程是并不同步的
          // 根据最新的数据，对应的DOM是已经被渲染出来了，但是对应的图片是依然没有被加载完成的(目前获取到的offsetTop是不包含其中的图片的)
          // offsetTop值不对的时候，都是因为图片的问题。加载图片的时候切记需要重新赋值。
          this.themeTopYs = [];

          this.themeTopYs.push(0);
          this.themeTopYs.push(this.$refs.param.$el.offsetTop);
          this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
          this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);

          console.log(this.themeTopYs);
        })

直接打印是没有值的，必须在$nextTick()回调函数等渲染线程执行完毕之后进行一次回调执行之后才能够打印出来。

//监听图片加载
methods: {
   detailImageLoad() {
      this.newRefresh();
this.themeTopYs = [];

          this.themeTopYs.push(0);
          this.themeTopYs.push(this.$refs.param.$el.offsetTop);
          this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
          this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);

          console.log(this.themeTopYs);
   }
}

created: {
   // 给getThemeTopY进行赋值
   this.getThemeTopY = debounce(()=> {
      this.themeTopYs = [];

          this.themeTopYs.push(0);
          this.themeTopYs.push(this.$refs.param.$el.offsetTop);
          this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
          this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);

          console.log(this.themeTopYs);
   })
}

methods: {
   detailImageLoad() {
      this.getThemeTopY();
   }

总结：

1. 在detail中监听标题的点击，获取index
2. 滚动到对应的主题：
   获取所有主题的offsetTop
   问题在哪里能够获取到正确的offsetTop：
   ** 1. created肯定不行，压根不能获取元素
   ** 2. mounted也不行，数据还没有获取到
   ** 3. 获取到数据的会调也不行，DOM还没有渲染完成。
   **4. $nextTick也不行，因为图片的高度没有被计算在内。
   **5. 在图片加载完成之后，获取的高度才是正确的。