uniapp使用 uview-plus 底部导航栏(vue3项目)_uniapp底部导航栏(1)_u-tabbar-item icon更换 vue3语法

} else {
  useStore.setActive(index)
  const path = item.pagePath
  uni.switchTab({
    url: path
  })
}
1
2
3
4
5
6
7

}
}
//图标的切换
const getTabbarIcon = (item, index) => {
return useStore.activeTab === index ? item.selectedIconPath : item.iconPath
}

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


#### **store/user.js中具体代码：**



1
2
3
4
5
6
7
8
9
10
11
12
13

import { defineStore } from ‘pinia’

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

//暴露小仓库
export default useUserStore

#### **关于uniapp中pinia的使用，可查看之前写的这篇文章**
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/970748