1.需求说明
2.实现原理说明
3.实现过程
3.1集成uView2.0
3.2 自定义tabbar
3.3 vuex定义tabbar共享信息
3.4 tabbar显示个数控制

1.需求说明

要求不同时间显示不同的tabbar.点击不同的tabbar跳转到不同的页面,能随时实现tabbar显示个数的切换。一种是只需要显示首页、我的页面；另一种是显示首页、消息、我的页面。效果图如下：

2.实现原理说明

基于uview2.0的u-tabbar实现自定义tabbar，使用vuex实现tabbar显示状态数据共享。首页和我的页面初始化时调用后端接口获取当前tabbar状态,根据不同的状态控制页面显示两个还是显示三个tabbar.

3.实现过程

3.1集成uView2.0

Hbuilder导入插件,uniapp插件市场搜索:uView2.0
uni.scss中添加如下:

// 导入uView全局scss变量文件@import "./uni_modules/uview-ui/theme.scss";

main.js中添加如下:

// 引入全局uViewimport uView from './uni_modules/uview-ui'Vue.use(uView)
3.2.自定义tabbar

自定义组件:custom-tabbar

<template><view ><u-tabbar:value="tabbarIndex":fixed="true":safeAreaInsetBottom="true":placeholder="true"><u-tabbar-itemv-for="(tabbarItem,index) in tabbar" :key="index" :text="tabbarItem.text" @click="switchTo()"><imageclass="image_class"slot="active-icon":src="tabbarItem.selectedIconPath"></image><imageclass="image_class"slot="inactive-icon":src="tabbarItem.iconPath"></image></u-tabbar-item></u-tabbar></view></template><script>import {mapState} from 'vuex';export default {name:"custom-tabbar",data() {return {tabbar:[]// tabbar信息};},computed: mapState({tabbarIndex:'tabbarIndex',tabbarList:'tabbarList'}), // 自定义组件中属性props:['tabbarState'],created() {// 模拟调用服务端接口,显示首页和我的页面if(this.tabbarState == 1){const storeTabbar=this.$store.state.tabbarList;this.tabbar = this.tabbar.concat(storeTabbar[0]).concat(storeTabbar[2]);}// 模拟调用服务端接口,显示首页、消息和我的页面if(this.tabbarState == 2){this.tabbar = this.$store.state.tabbarList;}},methods:{// 页面跳转switchTo(event){wx.switchTab({url: this.tabbar[event].pagePath,success: () => {this.$store.state.tabbarIndex = event}})}},}</script><style lang="scss">.image_class{width: 50rpx;height: 50rpx;}</style>
3.3.vuex定义tabbar共享信息

项目根目录下创建storage文件夹,然后创建index.js.内容如下:

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({// 这个代表全局可以访问数据对象，就像是咱们在组件中声明的 data 属性，区别在于data中数据为组件私有，这里state为项目全局共享。state: {// 自定义tabbar索引tabbarIndex:0,// tabbar信息tabbarList:[{iconPath: "/static/index.png",selectedIconPath: "/static/index_select.png",text: '首页',count: 2,isDot: true,pagePath: "/pages/index/index"},{iconPath: "/static/message.png",selectedIconPath: "/static/message_select.png",text: '消息',midButton: true,pagePath: "/pages/news/news"},{iconPath: "/static/mine.png",selectedIconPath: "/static/mine_select.png",text: '我的',pagePath: "/pages/mine/mine"},]},// 这个实时监听 state 内的数据对象变化，类似 咱们组件中的 computed 属性，会依赖 state 数据变化而变化getters: {},// 用来同步设置 state 的值mutations: {},// 通过提交 mutations 内部的方法，异步更新 state 的状态，官方推荐都使用这种方法比较合适actions: {}})export default store

main.js中引入storage信息

// 引入 store import store from '@/store/index.js'Vue.prototype.$store = storeconst app = new Vue({...App,store})

page.json中设置tabbar路径,否则调用wx.switchTab方法不生效(仅针对于tabbar页面实现跳转)

"tabBar": {"custom": true,"list": [{"pagePath": "pages/index/index"},{"pagePath": "pages/news/news"},{"pagePath": "pages/mine/mine"}]}

3.4 tabbar显示个数控制

以下代码中通过手动修改tabbarState模拟调用服务端接口查询状态.首页与我的页面需要动态获取,消息页面固定显示三个tabbar设置即可.

我的页面:

<template><view><view>我的页面</view><view><!-- 自定义tabbar --><custom-tabbar :tabbarState='tabbarState'></custom-tabbar></view></view></template><script>export default {data() {return {tabbarState: 3 //tabbar显示个数 1.显示2个;2.显示3个};},created() {// 控制tabbar显示个数 1.显示2个;2.显示3个this.tabbarState=1;console.log("首页状态:"+this.tabbarState)}}</script><style lang="scss"></style>

首页:

<template><view class="content"><image class="user_img" :src="userImg"></image><view class="nick_class"><text class="title">昵称:</text><input type="nickname" class="weui-input" placeholder="请输入昵称"/></view><view><!-- 自定义tabbar --><custom-tabbar :tabbarState='tabbarState'></custom-tabbar></view></view></template><script>export default {data() {return {userImg:"../../static/logo.png",tabbarState: 3 //tabbar显示个数 1.显示2个;2.显示3个}},created() {// 控制tabbar显示个数 1.显示2个;2.显示3个this.tabbarState=1;console.log("首页状态:"+this.tabbarState)},methods: {}}}</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.user_img {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}.nick_class{display: flex;flex-direction: row;}</style>

消息页面:

<template><view><view>消息页面</view><view><!-- 自定义tabbar --><custom-tabbar tabbarState=2></custom-tabbar></view></view></template><script>export default {data() {return {value1: 0};},methods:{}}</script><style lang="scss"></style>

补充:
可以直接在自定义tabbar中请求渲染之前设置tabbar信息:

beforeCreate() {// 调用接口findTabbarSetting({}).then((res)=>{if(res.Flag){this.tabbar = this.$store.state.tabbarList;console.log("显示三个"+JSON.stringify(this.tabbar))}else{const storeTabbar=this.$store.state.tabbarList;this.tabbar = this.tabbar.concat(storeTabbar[0]).concat(storeTabbar[2]);console.log("显示两个"+JSON.stringify(this.tabbar))}})}

各页面引用tabbar时则不需要传参,可以直接引用,实例:

<template><view><view>消息页面</view><view><custom-tabbar></custom-tabbar></view></view></template>

以上是实现tabbar动态显示的实现过程,如果感觉有帮助欢迎评论区点赞或留言!