欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue组件tabbar使用方法详解

程序员文章站 2023-10-27 23:16:40
本文实例为大家分享了vue组件tabbar的具体使用方法,供大家参考,具体内容如下 1.app.vue

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

vue组件tabbar使用方法详解

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。