tab栏签标根据向上滚动距离，切换到对应的标签上

最新推荐文章于 2024-04-03 10:32:00 发布

狮子歌歌_丶

最新推荐文章于 2024-04-03 10:32:00 发布

阅读量348

点赞数

分类专栏： vue JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Liushiliu104/article/details/129209697

版权

JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

该文介绍了一个H5项目实现，当页面向上滚动时，依据不同高度切换顶部Tab标签。通过获取每个标签的offsetTop值并比较滚动距离，确定当前活跃标签。在没有匹配项时，显示最后一个标签。文中还提供了一段生成随机数并调用匹配索引的测试代码。

摘要由CSDN通过智能技术生成

项目场景：

H5项目顶部Tab栏上对应多个标签，根据页面向上滚动高度，将活跃值切换到对应的标签上。

实现思路

获取到tab全部标签对应的offsetTop值，形成一个数组；
根据向上滚动的距离，与数组中的值进行比较，得到对应的索引；
最终获取的索引需要赋值给一个变量，而这个变量的初始值应该设置为数组长度 - 1，当我们数组中没有值与向上滚动距离匹配上是，默认显示最后一个tab标签。

测试代码

<body>
    <button class="btn">随机数</button>
    <script>
      // 1. 定义的数组
      const values = [100, 300, 500, 800, 1200]

      // 2. 生成随机数
      const elBtn = document.querySelector('.btn')
      elBtn.onclick = () => {
        let currentValue = Math.floor(Math.random() * 1500)
        matchIndex(currentValue)
      }

      // 获取对应索引
      function matchIndex(currentValue) {
        let targetIndex = values.length - 1
        for (let i = 0; i < values.length; i++) {
          if (values[i] > currentValue) {
            targetIndex = i - 1
            break
          }
        }
        if (targetIndex === -1) return
        console.log(targetIndex)
      }
    </script>