首页 > 其他分享 >滚动条位置

滚动条位置

时间:2023-02-08 23:58:36浏览次数:34  
标签:频道 tabs nameToTop 位置 滚动条 切换

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

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

步骤

  1. 明确数据结构, 在Home/index.vue定义变量
// “频道名称”和“滚动条位置”之间的对应关系,格式 { '推荐ID':211'htmlID': 30, '开发者资讯ID': 890 }
 const nameToTop = {}
  1. 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>
    
  2. 监测tabs切换后, 从nameToTop对象里拿到原本滚动位置设置

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

小结

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

标签:频道,tabs,nameToTop,位置,滚动条,切换
From: https://www.cnblogs.com/NaziriteGTC/p/17103750.html

相关文章