vue实现自动切换tab

（重要）介绍一个vue项目给大家学习，阅读别人的项目可以快速提高自己哦， 移动端vue完整项目

为移动端设计，为vue-cli项目组件，用到了jq，运用jq主要为了实现scrollTop动画效果，可能你会觉得用了jq会觉得臃肿，大可不必这么想，打包的时候把productionSourceMap:false的值设置为false即可把没用的代码全部去掉，解决代码冗余的烦恼，文章暂时不提供注释，后期补上

<template>
  <div class="parent" id="parent">
  <div class="child1_box" id="child1_box">
  <ul class="child1" id="child1">
  <li v-for='(item,index) in data' :id='nav_address[index]' @click='move_box(index,item)' :class='{active:current_obj===item||(index===0&¤t_obj===null)}' :key="item.id">{{item.title}}</li>
  </ul>
  </div>
  <div class="child2_box" id="child2_box">
  <ul class="child2" id="content_box">
  <li v-for='(item,index) in data' :id='content_address[index]'>{{item.title}}</li>
  </ul>
  </div>
  </div>
</template>
<script>
export default {
  name: 'parent',
  data () {
    return {
    data:[ {title:'第1项'},{title:'第2项'},{title:'第3项'},{title:'第4项'},{title:'第5项'},{title:'第6项'},{title:'第7项'},{title:'第8项'},{title:'第9项'},{title:'第10项'},{title:'第11项'},{title:'第12项'},{title:'第13项'}],
    content_address:['box1','box2','box3','box4','box5','box6','box7','box8','box9','box10','box11','box12','box13'],
    nav_address:['nav1','nav2','nav3','nav4','nav5','nav6','nav7','nav8','nav9','nav10','nav11','nav12','nav13'],
    position_array:[{position:0},{position:0},{position:0},{position:0},{position:0},{position:0},{position:0},{position:0},{position:0},{position:0},{position:0},{position:0},{position:0}],
    navElement:null,
    parentElement:null,
    current_obj:null,
    navCurrentObj:null,
    navChildElementHeight:null,
    offsetTop:0,
    v:10,
    filterValue:0,
    currentObjStatus:null
    }
  },
  methods:{
  getHeight:function(){
    for(var a = 0;a<this.position_array.length;a++){
        this.position_array[a].position = document.getElementById("box"+(a+1)).offsetTop
    }
    this.position_array[0].position = 0
  },
  move_box(index,item){
    this.filterValue = index
    this.navCurrentObj = document.getElementById(this.nav_address[index])
    this.offsetTop = this.position_array[index].position
    this.myScroll()
  },
  changeNavStyle(index){
    if(this.currentObjStatus != this.data[index]){
      this.currentObjStatus = this.data[index]
    }else{
      return
    }
    this.navCurrentObj = document.getElementById(this.nav_address[index])
    if(this.navCurrentObj.offsetTop>this.parentElement.clientHeight/2){
      $('#child1_box').stop()
      $('#child1_box').animate({scrollTop:this.navCurrentObj.offsetTop-this.parentElement.clientHeight/2+this.navChildElementHeight/2+'px'}, 500);
    }else{
      $('#child1_box').stop()
       $('#child1_box').animate({scrollTop:'0px'}, 500);
    }
    this.current_obj = this.data[index]
  },
  myScroll(){
   $('#child2_box').animate({scrollTop:this.offsetTop+'px'}, 500);
  } 
  },
  mounted:function(){
    var parentTop;
   this.parentElement = document.getElementById('child2_box');
   this.navElement = document.getElementById('child1_box');
   this.navChildElementHeight = document.getElementById('nav1').clientHeight/2;
   setTimeout(()=>{
    this.getHeight();
   },500)
   this.parentElement.onscroll=() => {   
    parentTop = this.parentElement.scrollTop
    if(this.position_array[12].position<=parentTop){
      this.changeNavStyle(12)
    }else if(this.position_array[11].position<=parentTop){
      this.changeNavStyle(11)
    }else if(this.position_array[10].position<=parentTop){
      this.changeNavStyle(10)
    }else if(this.position_array[9].position<=parentTop){
      this.changeNavStyle(9)
    }else if(this.position_array[8].position<=parentTop){
      this.changeNavStyle(8)
    }else if(this.position_array[7].position<=parentTop){
      this.changeNavStyle(7)
    }else if(this.position_array[6].position<=parentTop){
      this.changeNavStyle(6)
    }else if(this.position_array[5].position<=parentTop){
      this.changeNavStyle(5)
    }else if(this.position_array[4].position<=parentTop){
      this.changeNavStyle(4)
    }else if(this.position_array[3].position<=parentTop){
      this.changeNavStyle(3)
    }else if(this.position_array[2].position<=parentTop){
      this.changeNavStyle(2)
    }else if(this.position_array[1].position<=parentTop){
      this.changeNavStyle(1)
    }else if(this.position_array[0].position<=parentTop){
      this.changeNavStyle(0)
    }
  }  
  }
}
</script>
<style scoped>
.parent{width: 16.0rem;height: 15.0rem;overflow: scroll;background-color: yellow;}
.child1_box{width: 2.0rem;height: 15rem;position: absolute;left: 0.0rem;top: 0.0rem;overflow: scroll;}
.child1{width: 2.0rem;height: 1.0rem;font-size: 0.5rem;top: 0.0rem;left: 0.0rem;z-index: 1; position: absolute;}
.child1 li{width: 100%;height: 1.25rem;line-height: 1.25rem; border-bottom: 0.05rem solid blue; display: inline-block;float: none;}
.child1 .active{background-color: white;}
.child2_box{width: 14.0rem;height: 15rem;position: absolute;right: 0.0rem;top: 0.0rem;overflow: scroll;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-o-transition: all 0.5s;}
.child2{width:14.0rem;height: 15rem; right: 0.0rem; position: absolute;}
.child2 li{width: 14.0rem;height: 15rem;display: inline-block;position: relative; float: none; background-color: red;}
.child1_box::-webkit-scrollbar{width: 0;height: 0;} 
.child2_box::-webkit-scrollbar{width: 0;height: 0;} 
</style>