element-ui tabs栏的蓝色光标随页面滑动变化

bitter️

已于 2022-04-13 14:51:00 修改

阅读量1.2k

点赞数

分类专栏： element ui vue 文章标签：前端

于 2022-04-08 16:27:45 首次发布

本文链接：https://blog.csdn.net/m0_59501287/article/details/124044751

版权

vue 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

element ui

8 篇文章 0 订阅

订阅专栏

//0.获取整个页面的高度
  const pageHeight = document.documentElement.clientHeight    
     //1.对页面id为box的设置scroll滑动事件
    document.getElementById("box").addEventListener("scroll", () => {
         //2.获取id为idName的标签，其顶部到页面的高度
          let contentTop = document
            .getElementById("idName")
            .getBoundingClientRect().top;
         //3.获取id为idName的标签，其自身高度
          let contentHeight = document
            .getElementById("idName").offsetHeight
          //4.设置标签出现的条件
          let trueOrFalse = (contentTop < pageHeight && contentTop >= 0) || (contentTop < 0 && (contentTop + contentHeight > 0))
          if (trueOrFalse){
            //5.满足条件，重新对tab栏绑定的v-module进行赋值
        }
    });

给一个具体的例子：

      // 页面滑动tabs栏的蓝色光标跟随移动
      const pageHeight = document.documentElement.clientHeight
      this.tabslist.forEach((item, index) => {
        item.subMenus.forEach(i => {
          let contentTop = document
            .getElementById(i.id)
            .getBoundingClientRect().top;
          console.log(contentTop)
          let contentHeight = document
            .getElementById(i.id).offsetHeight
          //设置标签出现的条件
          let trueOrFalse = (contentTop < pageHeight && contentTop >= 0) || (contentTop < 0 && (contentTop + contentHeight > 0))
          if (trueOrFalse && index == 0) {
            this.activeName = '0'
          } else if (trueOrFalse && index == 1) {
            this.activeName = '1'
          } else if (trueOrFalse && index == 2) {
            this.activeName = '2'
          } else if (trueOrFalse && index == 3) {
            this.activeName = '3'
          } else if (trueOrFalse && index == 4) {
            this.activeName = '4'
          } else if (trueOrFalse && index == 5) {
            this.activeName = '5'
          }
        })

      })