关于vue.js:基于Vue实现的侧边栏导航组件自动居中上下滑动切换菜单

左侧边栏导航组件, 当左侧导航超过一屏高度时, 切换导航具备动画居中成果, 能够滑动右侧区域来切换导航, 滑动到屏幕底部时主动切换到下个导航, 相同滑动到顶部切换上一
下载地址: https://download.csdn.net/dow…
效果图请点击:

次要代码片段:
// 子分类列表

categoryList(id) {
  const res = list2
  const num = Math.ceil(Math.random() * 5)
  console.log(num)
  this.classifyList = getRandom(res.data.slice(0, num))

  // 注因为这里子分类数据只有一个, 所有采纳打乱程序的形式显示, 理论可依据申请回来的数据来显示
  function getRandom(arr) {let [newArr, selItem] = [[], null]
    let len = arr.length
    while (newArr.length < len) {selItem = arr[Math.floor(Math.random() * len)]
      if (!newArr.find((item) => item.id == selItem.id)) {newArr.push(selItem)
      }
    }
    return newArr
  }
},

tabNav(index, event) {

  const $nav = this.$refs.nav
  let {scrollTop, clientHeight, scrollHeight} = $nav
  const {clientHeight: itemHeight} = $nav.querySelector('.item'),
    len = Math.floor(clientHeight / itemHeight),
    middle = Math.ceil(len / 2) - 1,
    currentScrollHeight = (index - middle) * itemHeight,
    {navIndex} = this,
    prevScroll = Math.abs(index - navIndex) * itemHeight
  let timer = setInterval(() => {if (navIndex < index) {
      scrollTop += prevScroll / 16
      $nav.scrollTop = scrollTop
      if (scrollTop >= currentScrollHeight) {clearInterval(timer)
        timer = null
      }
    } else {
      scrollTop -= prevScroll / 16
      $nav.scrollTop = scrollTop
      if (scrollTop <= currentScrollHeight) {clearInterval(timer)
        timer = null
      }
    }
  }, 20)
  this.$refs.list.scrollTo(0, 0)
  this.isLowest = false
  this.navIndex = index
  this.categoryList(this.navList[index].id)
  this.swiperPicture(this.navList[index].id)
  // this.setClassifyActive(index)
  this.getClassifyActive = index
},