這篇文章主要爲大家詳細介紹了vue組件tabbar使用方法,具有一定的參考價值,感興趣的小夥伴們可以參考一下
本文實例爲大家分享了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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。