vue如何实现滚动tab跟随切换效果

这篇文章给大家分享的是有关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中的一个字段，也可以分开写

  {{item.name}}