uniapp使用 uview-plus 底部导航栏(vue3项目)_uniapp底部导航栏

最新推荐文章于 2026-08-15 10:09:34 发布

原创最新推荐文章于 2026-08-15 10:09:34 发布 · 1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

store/user.js中具体代码：

import { defineStore } from 'pinia'

//创建小仓库
const useUserStore = defineStore('User', {
  state: () => {
    return {
      activeTab: 1 // 默认选中的索引
    }
  },
  actions: {
    //设置active的值
    setActive(active) {
      this.activeTab = active
    }
  }
})

//暴露小仓库
export default useUserStore

关于uniapp中pinia的使用，可查看之前写的这篇文章👇

uniapp使用 uview-plus 和 Pinia（vue3项目）_翻滚的露西的博客-CSDN博客

三、pages.json配置tabbar的基本路径

备注：只需要路径即可

"tabBar": {
        "color": "#999",
        "selectedColor": "#0aa671",
        "borderStyle": "white",
        "list": [
            {
                "pagePath": "pages/charge/charge"
            },
            {
                "pagePath": "pages/scan/scan"
            },
            {
                "pagePath": "pages/my/my"
            }
        ]
  	}

四、在需要使用的页面引入tabbar组件

//my页面👇
<template>
  <view>
    <!-- 引入导航栏tabbar组件 -->
    <tabbar></tabbar>
  </view>
</template>

五、隐藏pages.json里配置的导航栏，使用封装的tabbar组件

备注：我是在根组件App.vue中隐藏的，只写一次，这样使用的页面就不用再写了

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
            //⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
			uni.hideTabBar({
              animation:false
           })
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>