uniapp动态底部tab栏

实现思路：

        创建一个js文件用来存放所有的tabbar,不同的数组表示不同的tabbar组合。
        创建一个vue文件用来制作底部tabbar组件。
        使用vuex存储用户的身份信息,根据身份信息切换tabbar组合。
具体步骤：

       新建一个tabbar.js文件，将不同的tabbar组合用不同的数组表示出来。

// 公共页面
export const publicBar = [{
        "pagePath": "/pages/home/index",
        "iconPath": require("@/static/logo.png"),
        "selectedIconPath": require("@/static/logo2.jpg"),
        "text": "首页"
    },
    {
        "pagePath": "/pages/car/index",
        "iconPath": require("@/static/logo.png"),
        "selectedIconPath": require("@/static/logo.png"),
        "text": "购物车"
    }
]
 
// 自己的页面
export const selfBar = [{
        "pagePath": "/pages/home/index",
        "iconPath": require("@/static/logo.png"),
        "selectedIconPath": require("@/static/logo.png"),
        "text": "首页"
    },
    {
        "pagePath": "/pages/mine/index",
        "iconPath": require("@/static/logo.png"),
        "selectedIconPath": require("@/static/logo.png"),
        "text": "我的"
    },
]

创建一个vue文件编写底部tabbar组件代码。

在根目录创建store文件夹,在store文件夹下创建module文件夹和创建index.js文件,在module文件夹下面创建tabBarModule.js文件。                             
在tabBarModule.js文件中编写vuex代码,然后在store文件夹下面的index.js文件中引入tabBarModule.js文件作为一个模块。

// 引入两个tabbar组合
import {
    publicBar,
    selfBar
} from '@/utils/tabbar.js'
export default {
    // 开启命名空间
    namespaced: true,
    // 存放基础数据
    state: {
        // 用户信息
        userInfo: uni.getStorageSync('userInfo') || '',
        // 初始化一个空的tabbar组合
        tabBarList: [],
        // 当前选中的tabbar项，控制页面刷新导航高亮位置不变
        activeIndex: uni.getStorageSync('acIndex') || 0, 
    },
    mutations: {
        // 保存用户信息
        setUserInfo(state, token) {
            uni.setStorageSync('userInfo', token)
            state.userInfo = token;
            // 根据用户信息切换tabbar组合
            token !== 'public' ?
                state.tabBarList = selfBar :
                state.tabBarList = publicBar
 
        },
        // 记录当前选中的tabbar项
        changeIndex(state, index) {
            uni.setStorageSync('acIndex', index)
            state.activeIndex = index
        }
    },
}
在index.js文件中引入tabBarModule模块,并且在mian.js中引入store
import tabBarModule from '@/store/module/tabBarModule.js'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        tabBarModule
    }
})

在每个页面引入刚才的底部tabbar组件,并且使用uni.hideTabBar()隐藏默认导航栏

附上page.json文件供参考 

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/home/index",
            "style": {
                "navigationBarTitleText": "home"
            }
        },
        {
            "path": "pages/mine/index",
            "style": {
                "navigationBarTitleText": "mine"
            }
        },
        {
            "path": "pages/car/index",
            "style": {
                "navigationBarTitleText": "car"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {},
    "tabBar": {
        "list": [
            {
                "pagePath": "pages/home/index"
            },
            {
                "pagePath": "pages/mine/index"
            },
            {
                "pagePath": "pages/car/index"
            }
        ]
    }
}

原文链接：https://blog.csdn.net/weixin_47190975/article/details/129353819

亲测有效，另外，点击退出后重新登录跳转首页activeIndex不会自动切换（即tab栏激活项未切换），在登录成功跳转首页前添加this.changeIndex(0)即可