uniapp怎么生成动态的tabBar栏,让不同的人登录账号显示不同tabBar栏
时间: 2024-03-17 13:40:19 浏览: 20
要生成动态的tabBar栏,你可以使用uniapp提供的自定义导航栏组件,根据不同的登录账号来动态生成不同的tabBar栏。
下面是一个简单的示例:
1. 在`App.vue`中定义一个`tabBarList`数组,用来存储不同账号的tabBar栏的配置信息:
```javascript
export default {
data() {
return {
tabBarList: [
{
text: '首页',
icon: '/static/tabbar/home.png',
selectedIcon: '/static/tabbar/home-active.png',
pagePath: '/pages/index/index'
},
{
text: '我的',
icon: '/static/tabbar/user.png',
selectedIcon: '/static/tabbar/user-active.png',
pagePath: '/pages/user/user'
}
]
}
}
}
```
2. 在`index.vue`页面中使用自定义导航栏组件,并传入对应的`tabBarList`数组:
```html
<template>
<view>
<cu-custom bgColor="#ffffff" :isBack="false" :tabBarList="tabBarList"></cu-custom>
<view>首页</view>
</view>
</template>
<script>
import cuCustom from '@/components/cu-custom.vue'
export default {
components: { cuCustom },
data() {
return {
tabBarList: [
{
text: '首页',
icon: '/static/tabbar/home.png',
selectedIcon: '/static/tabbar/home-active.png',
pagePath: '/pages/index/index'
},
{
text: '我的',
icon: '/static/tabbar/user.png',
selectedIcon: '/static/tabbar/user-active.png',
pagePath: '/pages/user/user'
}
]
}
}
}
</script>
```
3. 在不同的登录账号中,根据需求修改`tabBarList`数组中的数据,从而生成不同的tabBar栏。
例如,如果需要在某个账号登录后,显示一个新增的`消息`tabBar栏,可以在登录成功后动态修改`tabBarList`数组:
```javascript
this.tabBarList.push({
text: '消息',
icon: '/static/tabbar/message.png',
selectedIcon: '/static/tabbar/message-active.png',
pagePath: '/pages/message/message'
})
```
这样就可以根据不同的登录账号生成不同的tabBar栏了。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)