一个vue滚动tab跟随切换的例子

分享一个我前几天做的移动端 tab滚动跟随的例子

随着滚动条的滚动，tab会对应进行切换

首先我们需要监听当前页面的滚动

  mounted(){
    //记录每个内容对用的dom数组
    this.arrDom = document.getElementsByClassName("item-content");
    window.addEventListener('scroll', this.handleScroll);
  },

  destroyed(){
    window.removeEventListener('scroll', this.handleScroll);
  },

我们的tab列表可以在data里面进行自定义数组：

      tabList:[{
        id:1,
        name:'详情'
      },{
        id:2,
        name:'评论'
      },{
        id:3,
        name:'新闻'
      },{
        id:4,
        name:'关于'
      },{
        id:5,
        name:'相关'
      }],

然后我们在dom里面对应渲染tab列表和对应内容,内容可以直接关联到tablist的item中的一个字段，也可以分开写

<nav :clas