基于Vue实现的侧边栏导航组件,自动居中,上下滑动切换菜单 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 },