• vue项目实例
  • vue实现自动切换tab

    peace 2年前 1218次点击 来自 vue项目实例

    (重要)介绍一个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>

    目前暂无回复
    关于 广告投放
    ©2016 - 2019 V4.1.6 Powered by 北京雏森科技有限公司