vue實現自動切換tab
阿新 • • 發佈:2019-02-01
(重要)介紹一個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>