优化_频道-滚动条位置

以下效果都没有发生路由切换！！！： 

 知识补充：

　 activated：在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

　　deactivated：在组件被停用时调用。

　　注意：只有组件被 keep-alive 包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。

这里我们的页面home组件被 keep-alive 包裹

目标

• 明确数据结构
• tabs切换保存当前位置
• tabs切换后, 把位置设置

步骤

1.明确数据结构, 在Home/index.vue定义变量

// “频道名称”和“滚动条位置”之间的对应关系，格式 { '推荐ID': 211, 'htmlID': 30, '开发者资讯ID': 890 }

 data () {
    return {
      // 当前频道的ID
      channelId: 0,
      channelScrollTObj: {} //频道名称”和“滚动条位置”之间的对应关系
    }
  }

2.给window绑定滚动事件（这里效果显示滚动条是整个document文件）------这里可以在activated（）或者created（）生命周期函数中添加绑定事件，因为home组件的第一次创建activated（）和created（）都会执行，并且这里的tab切换效果，不会导致home组件的 deactivated ()和destroyed（）发生！也就是说home数据不会置为初始状态！

activated () {
    // 原生js通过window.onscroll监听
    window.addEventListener('scroll', this.scrollFn) // 监听滚动事件
  },

methods:{
     scrollFn () {
      // 保存各个频道滚动的位置
      this.channelScrollTObj[this. channelId] = document.documentElement.scrollTop
      console.log(this.channelScrollTObj)
    }
}

3.给tabs标签绑定change事件（切换后！！）

 <van-tabs
      v-model="active"
      animated
      swipeable
      class="channel-tabs"
      @change="channelChangeFn"
    >

methods:{
     channelChangeFn () {
      // 当频道发生切换时，将原先保存的滚动记录还原出来
      document.documentElement.scrollTop = this.channelScrollTObj[this. channelId]
    }
}

4.后台打印： 

5.最后  ---给全局dom绑定事件（这里是window，所有的组件共用一个window）一定要记得在摧毁

 deactivated () {
    // 给全局dom绑定事件（这里是window，所有的组件共用一个window）一定要记得在摧毁
    window.removeEventListener('scroll', this.scrollFn)
  }