左侧边栏导航组件,当左侧导航超出一屏高度时,切换导航有动画居中效果,可以滑动右侧区域切换导航,滑动到屏幕底部时自动切换到下一个导航,否则滑动到顶部切换1下载地址:https://download.csdn.net/dow...效果图请点击:maincodesnippet://subcategorylistcategoryList(id){constres=list2constnum=Math.ceil(Math.random()*5)console.log(num)this.classifyList=getRandom(res.data.slice(0,num))//注意由于这里只有一个子类数据,所有都是随机显示的,实际可以根据请求函数getRandom(arr)返回的数据来显示{let[newArr,selItem]=[[],null]letlen=arr.lengthwhile(newArr.lengthitem.id==selItem.id)){newArr.push(selItem)}}returnnewArr}},tabNav(index,event){const$nav=this.$refs.navlet{scrollTop,clientHeight,scrollHeight}=$navconst{clientHeight:itemHeight}=$nav.querySelector('.item'),len=Math.floor(clientHeight/itemHeight),middle=Math.ceil(len/2)-1,currentScrollHeight=(index-middle)*itemHeight,{导航Index}=this,prevScroll=Math.abs(index-navIndex)*itemHeightlettimer=setInterval(()=>{if(navIndex=currentScrollHeight){clearInterval(timer)timer=null}}else{scrollTop-=prevScroll/16$nav.scrollTop=scrollTopif(scrollTop<=currentScrollHeight){clearInterval(timer)timer=null}}},20)这个。$refs.list.scrollTo(0,0)this.isLowest=falsethis.navIndex=indexthis.categoryList(this.navList[index].id)this.swiperPicture(this.navList[index].id)//这个.setClassifyActive(index)this.getClassifyActive=index},