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