vue底部跳转_h5之vue自定义底部导航栏

代码

Item.vue

export default{

name: 'Item',

props:{

txt:{

type:String

},

page:{

type:String

},

sel:{

type:String

}

},

computed:{

bol: function(){

if(this.sel == this.page){

return true;

}

return false;

}

},

methods:{

changePage:function(){

//点击跳转对应的页面

this.$router.push('/'+this.page);

this.$emit('change',this.page)

}

}

}

.itemWarp{

flex-grow: 1;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

}

.itemWarp span{

font-size: 12px;

}

Tabbar.vue

import Item from './Item.vue'

export default{

components:{

Item

},

data:function(){

return{

selected:'skin',

tabbarDes:[

{

txt:'账号',

page:'account',

normalImg:require('../assets/images/1.jpg'),

activeImg:require('../assets/images/2.jpg')

},

{

txt:'设置',

page:'setup',

normalImg:require('../assets/images/3.jpg'),

activeImg:require('../assets/images/4.jpg')

}

]

}

},

methods:{

getVal:function(res){

this.selected = res;

}

}

}

.warp{

width: 100%;

border-top: 1px solid #eee;

background: #fff;

display: flex;

align-items: center;

justify-content: space-around;

font-size: 0;

}

.warp img{

width: 20px;

height: 20px;

}

.tabberWarp img{

margin-top: 10px;

margin-bottom: 5px;

}

.tabberWarp{

position: fixed;

bottom: 0;

left: 0;

width: 100%;

padding-bottom: 5px;

background: #fff;

}

app.vue

import Tabbar from './components/Tabbar.vue'

components:{ Tabbar },