<template>
<mt-tabbar v-model=
"message"
fixed>
<mt-tab-item id=
"MainPage"
>
<img slot=
"icon"
:src=
"this.atabs[0]"
>
主页
</mt-tab-item>
<mt-tab-item id=
"ShoppingList"
>
<img slot=
"icon"
v-bind:src=
"this.atabs[1]"
>
积分商城
</mt-tab-item>
<mt-tab-item id=
"GroupList"
>
<img slot=
"icon"
v-bind:src=
"this.atabs[2]"
>
微社区
</mt-tab-item>
<mt-tab-item id=
"UserCenter"
>
<img slot=
"icon"
v-bind:src=
"this.atabs[3]"
>
我的
</mt-tab-item>
</mt-tabbar>
</template>
<script>
export
default
{
data(){
return
{
//选中的tabbar值message为外面页面传入的值selected
message:
this
.selected,
//这里使用的icon图标为图片,所以需要加图片改变的传入,若使用阿里图标,则不用加
atabs:
this
.tabs,
}
},
props:{
selected: String,
tabs:Array,
},
watch: {
message:
function
(val, oldVal) {
// 这里就可以通过 val 的值变更来确定去向
switch
(val){
case
'MainPage'
:
this
.$router.push(
'/mainpage'
);
break
;
case
'ShoppingList'
:
this
.$router.push(
'/shoppinglist'
);
break
;
case
'GroupList'
:
this
.$router.push(
'/grouplist'
);
break
;
case
'UserCenter'
:
this
.$router.push(
'/usercenter'
);
break
;
}
}
},
}
</script>
引入组件
import tabbar from
'../../components/tabbar'
export
default
{
components:{tabbar},
data(){
return
{
selected:
"ShoppingList"
,
tabs:[require(
"../../assets/images/icon/zhuye.png"
),require(
"../../assets/images/icon/icon42-1.png"
),
require(
"../../assets/images/icon/weuquan1.png"
),require(
"../../assets/images/icon/huijia.png"
)],
}
},
}