滚动条位置

优化_频道-滚动条位置
目标

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

步骤

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

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

2. tabs标签绑定before-change事件和方法实现

   向nameToTop添加属性和位置, 缓存起来

   <van-tabs v-model="channelId" animated sticky offset-top="1.226667rem" :before-change="tabBeforeChangeFn">
       
   <script>
   methods: {
       // 频道切换之前触发
       tabsBeforeChangeFn () {
         nameToTop[this.channelId] = window.scrollY // 先保存要被切走频道的滚动距离(一定要用哦this.channelId里存着的)
         // 只有return true才会让tabs切换
         return true
       }
   }
   </script>
   

3. 监测tabs切换后, 从nameToTop对象里拿到原本滚动位置设置

       
   <script>
   methods: {
       // 频道切换后
       tabsChangeFn (channelId) {
         // 等 DOM 更新完毕之后，根据记录的"滚动条位置"，调用 window.scrollTo() 方法进行滚动
         this.$nextTick(() => {
           window.scrollTo(0, nameToTop[channelId] || 0)
         })
       }
   }
   </script>

小结

1. 首先明确数据结构, 频道id对应滚动条值
2. 切换之前保存, 切换之后从数据结构取出对应值设置