uniapp动态底部tab栏

实现思路:

创建一个js文件用来存放所有的tabbar,不同的数组表示不同的tabbar组合。

创建一个vue文件用来制作底部tabbar组件。

使用vuex存储用户的身份信息,根据身份信息切换tabbar组合。

具体步骤:

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

javascript 复制代码
// 公共页面
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组件代码。

html 复制代码
<template>
    <view class="tabbar-list">
        <view class="tabbar-item" v-for="(item, index) in tabBarList" :key="index" @click="changeActive(item, index)">
            <image class="img" :src="activeIndex === index ? item.selectedIconPath : item.iconPath"></image>
            <view>{{ item.text }}</view>
        </view>
    </view>
</template>
 
<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'
    export default {
        data() {
            return {}
        },
        computed: {
            ...mapState('tabBarModule', ['activeIndex', 'tabBarList']),
        },
        methods: {
            ...mapMutations('tabBarModule', ['setUserInfo', 'changeIndex']),
            // 修改点击的tabbar项
            changeActive(item, index) {
                this.changeIndex(index)
                uni.switchTab({
                    url: item.pagePath
                })
            },
        },
        mounted() {
            // 模拟登录后获取的用户信息,'public'为公共模块,非'public'为我的模块
            this.setUserInfo('public')
            // this.setUserInfo('mine') 用这个进行切换就能看到不同的底部tabbar
        }
    }
</script>
<style lang="scss" scoped>
    .tabbar-list {
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 100rpx;
        border: 1px solid #ccc;
        overflow: hidden;
 
        .tabbar-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
 
            .img {
                width: 50rpx;
                height: 50rpx;
            }
        }
    }
</style>

在根目录创建store文件夹,在store文件夹下创建module文件夹和创建index.js文件,在module文件夹下面创建tabBarModule.js文件。

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

javascript 复制代码
// 引入两个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文件供参考

javascript 复制代码
{
    "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)即可

相关推荐
rui锐rui14 分钟前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
伍哥的传说15 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥16 分钟前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉1 小时前
npm 包 scheduler 介绍
前端·npm·node.js
bug爱好者1 小时前
原生小程序如何实现跨页面传值
前端·javascript
随笔记1 小时前
uniapp开发的小程序输入框在ios自动填充密码,如何欺骗苹果手机不让自动填充
前端·ios·app