详情页-首页和详情页监听全局事件和mixin的使用

首先是为什么会出现这个问题？
原因是首也监听的事件可能会发送到详情页，这显得逻辑上并不是很合理。第一种解决方案是采用路由的方式，进行路由切换，监听当前的路由路径，根据路由路径发射不同的事件。第二种方式是在Home页面，当页面失活时，取消页面全局事件的监听。

imgLoad() {
   if(this.$route.path.indexOf('/home') > -1) {
      this.$bus.$emit('homeItemImgLoad');
   } else if (this.$route.path.indexOf('/detail') > -1) {
   this.$bus.$emit('detailItemImgLoad');
   }
}

deactivated() {
        // 1. 保存Y值
        this.saveY = -this.$refs.scroll.scroll.y;

        // 2. 取消全局事件的监听
        this.$bus.$off('itemImgLoad', this.itemImgListener);
      }

详情页面实现思路：

六. 点击商品进入详情页面
** GoodsListItem的点击
** 点击之后获取商品的IID，跳转到详情页面，并且传入ID

解决首页保持位置的状态：
** deactivated: 记录离开的时候的位置
** activated: 通过scrollTo函数，设置离开时候的位置
** bug： Better-scroll 最新的1.15.0有scrollTo的函数
***解决方案：进行版本回退： 1.13.2

三. 详情页的导航栏的实现
** 返回按钮
** 标题列表的展示：center

四. 请求详情的数据
** 接口: /detail?iid=

五. 轮播图的实现:
***Swiper/SwiperItem

六. 商品基本信息的展示
** 数据来自四面八方。
** 对数据进行汇总：一个对象当中
** 一个对象传入到子组件中

#########################################
难点：

1. 代码如何组织
2. 业务逻辑(不要立即动手)

七. 店铺信息的展示：

八. 商品图片的展示

九. 参数信息的展示:
** 老师上课遇到的遍历问题。

十. 评论信息的展示
** 时间格式化
** 服务器返回的时间戳
** yyyy-MM-dd hh:mm:ss

十一. 推荐数据的展示
** 请求推荐数据
** goodslist的展示

十二：mixin的使用
共享代码往混入里面进行一个抽取
** 创建混入对象：const mixin = {}
**

难点：

1. 代码如何组织
2. 业务逻辑(不要立即动手)

公共代码进行抽取的混入mixin技术：

mixin（混入）：
对象里面的重复代码
class Animal {
}
class Person{
}

啊啊啊啊啊，我要为混入技术疯狂打call呀：
混入是相当于把外面的内容加入到当前组件的部分。

import {debounce} from "./utils";

export const itemListenerMixin = {
  data() {
    return {
      itemImgListener: null
    }
  },
  components: {
    
  },
  methods: {
    
  },
  mounted() {
    let refresh = debounce(this.$refs.scroll.refresh, 100);
    this.itemImgListener = () => {
      refresh();
    }
    this.$bus.$on('itemImgLoad', this.itemImgListener);
  },
}

混入技术的使用方法：

1. 创建混入对象
2. 设置属性
   mixins: [itemListenerMixin]