2024年前端最新uniapp使用 uview-plus 底部导航栏(vue3项目)_uniapp底部导航栏，2024年前端社招面试题精选

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

text: '我的',
iconPath: '/static/tab_icons/my.png',
selectedIconPath: '/static/tab_icons/my-active.png'

}
]
//点击tabbar按钮
const handleTabbarItemClick = (item, index) => {
if (useStore.activeTab !== index) {
//如果点击的是扫描按钮
if (index === 1) {
…//根据详细需求书写代码
} else {
useStore.setActive(index)
const path = item.pagePath
uni.switchTab({
url: path
})
}
}
}
//图标的切换
const getTabbarIcon = (item, index) => {
return useStore.activeTab === index ? item.selectedIconPath : item.iconPath
}

> 
> **说明：**如果直接在tabbar组件中定义active变量，active变量在每次切换时会被重置，因使用的组件中会使用tabbar组件，导致组件维护的active出现两份。所以在pinia中定义默认选中的索引，组件之间数据共享
> 
> 
> 


#### **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页面👇

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


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

![](https://img-blog.csdnimg.cn/25f7953691054854805f8a36b3383e2a.png)


## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**