vue组件tabbar使用方法详解_vue.js

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。