vue组件tabbar使用方法详解

<!-- 入口文件 -->
<template>
 <div id=\"app\">
 <!-- 视图层 -->
 <router-view></router-view>
 <!-- 底部选项卡 -->
 <tabbar @on-index-change=\"onIndexChange\" v-if=\"tabbarShow\">
  <tabbar-item selected  =\"/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  =\"/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\"  =\"/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>
 
< >
 // 引入 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);
  }
 }
 }
</ >
 
<style lang=\"less\" scoped>
 
</style>

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