pagePath: '/pages/my/my',
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中隐藏的，只写一次，这样使用的页面就不用再写了**
### 六、效果展示
### 七、样式更改
**备注：这是uview-plus的配置文件，默认情况满足需求可以不用更改**
如要修改字体大小，路径为：引入的uview-plus文件夹下的components中找到u-tabbar-item.vue文件内的修改 font-size👇
如要更改tabbar高度，路径为：引入的uview-plus文件夹下的components中找到 u-tabbar.vue 文件内的修改 height👇
### ajax
1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
