基于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
},