优化_频道-滚动条位置
目标
- 明确数据结构
- tabs切换保存当前位置
- tabs切换后, 把位置设置
步骤
- 明确数据结构, 在Home/index.vue定义变量
// “频道名称”和“滚动条位置”之间的对应关系,格式 { '推荐ID':211'htmlID': 30, '开发者资讯ID': 890 }
const nameToTop = {}
-
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>
-
监测tabs切换后, 从nameToTop对象里拿到原本滚动位置设置
<script>
methods: {
// 频道切换后
tabsChangeFn (channelId) {
// 等 DOM 更新完毕之后,根据记录的"滚动条位置",调用 window.scrollTo() 方法进行滚动
this.$nextTick(() => {
window.scrollTo(0, nameToTop[channelId] || 0)
})
}
}
</script>
小结
- 首先明确数据结构, 频道id对应滚动条值
- 切换之前保存, 切换之后从数据结构取出对应值设置