如何在vue中使用tabbar组件

这篇文章给大家介绍如何在vue中使用tabbar组件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

具体内容如下

1.App.vue

<!--入口文件-->
<template>
<divid="app">
<!--视图层-->
<router-view></router-view>
<!--底部选项卡-->
<tabbar@on-index-change="onIndexChange"v-if="tabbarShow">
<tabbar-itemselectedlink="/home">
<imgslot="icon"src="./assets/img/ic_tab_home_normal.png">
<imgslot="icon-active"src="./assets/img/ic_tab_home_active.png">
<spanslot="label">首页</span>
</tabbar-item>
<tabbar-itemshow-dotlink="/audioBook">
<imgslot="icon"src="./assets/img/ic_tab_subject_normal.png">
<imgslot="icon-active"src="./assets/img/ic_tab_subject_active.png">
<spanslot="label">书影音</span>
</tabbar-item>
<tabbar-itembadge="2"link="/mine">
<imgslot="icon"src="./assets/img/ic_tab_profile_normal.png">
<imgslot="icon-active"src="./assets/img/ic_tab_profile_active.png">
<spanslot="label">我的</span>
</tabbar-item>
</tabbar>
</div>
</template>

<script>
//引入vuxtabbar组件
import{Tabbar,TabbarItem}from'vux'
//引入vuex的两个方法
import{mapGetters,mapActions}from'vuex'

exportdefault{
name:'app',
components:{
Tabbar,
TabbarItem
},
data(){
return{
select:"Home"
}
},
//计算属性
computed:mapGetters([
//从getters中获取值
'tabbarShow'
]),
//监听,当路由发生变化的时候执行
watch:{
$route(to,from){
if(to.path=='/'||to.path=='/home'||to.path=='/audioBook'||to.path=='/mine'){
/**
*$store来自Store对象
*dispatch向actions发起请求
*/
this.$store.dispatch('showTabBar');
}else{
this.$store.dispatch('hideTabBar');
}
}
},
methods:{
onIndexChange(newIndex,oldIndex){
console.log(newIndex,oldIndex);
}
}
}
</script>

<stylelang="less"scoped>

</style>

2.效果图

3.其他情况

<template>
<divclass="weui-tab">
<divclass="weui-tab__panel">
<pv-for="iin100">{{i}}</p>
</div>
<tabbar>
<!--usev-link-->
<tabbar-itemv-link="{path:'/component/cell'}">
<imgslot="icon"src="../assets/demo/icon_nav_button.png">
<spanslot="label">Wechat</span>
</tabbar-item>
<!--usehttplink-->
<tabbar-itemshow-dotlink="https://vux.li">
<imgslot="icon"src="../assets/demo/icon_nav_msg.png">
<spanslot="label">Message</span>
</tabbar-item>
<!--usevue-routerlink-->
<tabbar-itemselectedlink="/component/cell">
<imgslot="icon"src="../assets/demo/icon_nav_article.png">
<spanslot="label">Explore</span>
</tabbar-item>
<!--usevue-routerobjectlink-->
<tabbar-item:link="{path:'/component/cell'}">
<imgslot="icon"src="../assets/demo/icon_nav_cell.png">
<spanslot="label">News</span>
</tabbar-item>
</tabbar>
</div>
</template>

<script>
import{Tabbar,TabbarItem}from'vux'
exportdefault{
ready(){
document.querySelector('body').style.height='100%'
document.querySelector('html').style.height='100%'
document.querySelector('#app').style.height='100%'
},
components:{
Tabbar,
TabbarItem
}
}
</script>

关于如何在vue中使用tabbar组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。