实现导航条的滚动与对应页面的跳转

要实现的功能是导航条的滚动，我如果是首行的话，向左滚动显示灰色，如果不是首行，向左滚动不显示灰色。向右滚动同样的道理。另外，要实现的是我导航滚动到最右边会自动跳转到下一页，我滚动到最左边会自动跳转到上一页。就这样简简单单的功能，我太菜了！！！
首先，要首先点击右图标会跳转下一页。点击左图标会跳转上一页。那这个功能又是怎么一个思路。想了好久。。。。。
新建一个数组，一点击的时候重新构造一个新的数组。

首先，我们得先初始化index 和新的数组

data(){ return { index:0, newList:[] } }
接着，就首先向左向右点击

methods:{
//向左滚动
 onBeforenavClick() {
 this.index=this.index-5
 this.newList=[]
 for(var i=this.index;i<topList.length;i++)//topList是原数组
 this.newList.push(this.topList[i])
 }
 //向右滚动
 onAfterClick(){
 this.index=this.index+5
 this.newList=[]
 for(var i=this.index;i<topList.length;i++)//topList是原数组
 this.newList.push(this.topList[i])
 }
}

实现了向右向左点击的效果，但要实现满足条件才能实现跳转，不满足条件的话图标显示灰色

我满足条件图标不显示灰色，我不满足条件显示灰色。那一个图标什么时候添加一个类样式
一个不够就定义两个。

<i v-if=" index>0" class="el-icon-d-arrow-left top-i" @click="onBeforenavClick()"></i>
      <i v-else class="el-icon-d-arrow-left top-i green"></i>
      <i v-if="topTypeList.length>5 &&index+5<topTypeList.length" class="el-icon-d-arrow-right top-i  " @click="onAfternavClick()"></i>
      <i v-else class="el-icon-d-arrow-right top-i green "></i>

这样的话大致就差不多完成了，那我的leader又说，不行，你还需要做的是导航条滚动下面对应的内容，滚动到下一页的时候会自动跳转到下一页。滚到上一页的时候自动跳转到上一页。那这样的话，好，收到，实习生太难了，我太菜了！！！！
他每一个index对应的内容都有唯一的clickType
那这样的话，要是他移动到index为5的时候，执行onAfternavClick()函数。初步想的是这样的，那就开始做

update：{
  if (this.newList.length > 5 && this.clickType === this.newList[5].type) {
    this.onAfternavClick()
    console.log('3333')
  }
  }

刚开始撸了这个，想可以右移动了，那我左移动也应该可以了，有点开心！！！
可是可是，不是，这样做有bug。我在更新的时候执行，导致我移动到index为5的时候，无法再点击事件。
第二个，向左滚动跟向右滚动会有冲突的点。这个方法不行！！

那怎么办，再想。最后

watch:{
clickType(nVal,oval)
if(!clickType){
return 
}
//在最上面的那个数组，你会发现，向左点击的时候，数组会完全发现变化
if(!this.newList.find(x=>x.type===nVal)//x.type=clickType
{
this.onBeforenavClick()
}
else if(this.newList.findIndex(x=>x.type===nVal)>5){
this.onAfternavClick()
}
}

最后可以了！！！！还需更要好好学习，在学习的路上~