您的位置：首页 > Web前端 > Vue.js

vue组件tabbar使用方法详解

2018-11-06 15:28 2867 查看

本文实例为大家分享了vue组件tabbar的具体使用方法，供大家参考，具体内容如下

1.App.vue

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

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

export default {
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>

<style lang="less" scoped>

</style>

2.效果图

3.其他情况

<template>
<div class="weui-tab">
<div class="weui-tab__panel">
<p v-for="i in 100">{{i}}</p>
</div>
<tabbar>
<!--use v-link-->
<tabbar-item v-link="{path:'/component/cell'}">
<img slot="icon" src="../assets/demo/icon_nav_button.png">
<span slot="label">Wechat</span>
</tabbar-item>
<!--use http link-->
<tabbar-item show-dot link="https://vux.li">
<img slot="icon" src="../assets/demo/icon_nav_msg.png">
<span slot="label">Message</span>
</tabbar-item>
<!--use vue-router link-->
<tabbar-item selected link="/component/cell">
<img slot="icon" src="../assets/demo/icon_nav_article.png">
<span slot="label">Explore</span>
</tabbar-item>
<!--use vue-router object link-->
<tabbar-item :link="{path:'/component/cell'}">
<img slot="icon" src="../assets/demo/icon_nav_cell.png">
<span slot="label">News</span>
</tabbar-item>
</tabbar>
</div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
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

相关文章推荐

新的分享

章节导航