uniapp 小程序中使用 uview-plus 实现不同脚色动态体现底部导航栏 tabbar
uniapp 小程序中使用 uview-plus 实现不同脚色动态体现底部导航栏 tabbar在使用uniapp开辟小程序项目中，常需要根据脚色的不同动态体现底部导航栏的内容。下面我将使用uview-plus中的tabbar组件来实现这个功能。
需要注意的是uview-plus是针对vue3项目使用的，以是下面的例子不适用vue2的项目，各人有需求可以去看uview。
添加网页代码
<up-tabbar :value="selectTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
activeColor="#006eff">
<up-tabbar-item v-for="item in tabbars" :text="item.text" :icon="item.icon"
@click="clickTabbar(item.name,item.path)" :key="item.name"></up-tabbar-item>
</up-tabbar>
up-tabbar属性解说
value：当前匹配项的name值；value的值对应哪个up-tabbar-item的name值，体现哪个up-tabbar-item被选中状态。
fixed：导航栏是否固定在底部。
placeholder：fixed定位固定在底部时，是否生成一个等高元素防止塌陷。
safeAreaInsetBottom：是否为苹果X留出底部安全隔断。
activeColor：选中标签颜色。
up-tabbar-item属性解说
text：描述文本，即tabbar的名称。
icon：tabbar体现的图标。
更多具体的属性及其作用可以去uview-plus官网一探究竟。
由此可知，体现一个自定义的图标，需要name（用于体现当前tab）、text、icon、path（跳转路径）这些属性。
当点击某一个tab时，通过传入的name值和path路径就能改变选中状态，跳转到下一个tab页面去。
不同脚色展示的tabbar
创建一个用于存储不同脚色展示的tabber数据的tabbar.js文件。以下是我的项目中两种不同脚色需要展示的tabbar，各人根据自己的项目需求调整。
// 普通用户展示的页面
const commonBar = [{
name: 0,
text: '首页',
icon: 'home',
path: '/pages/index/index'
},
{
name: 1,
text: '订单',
icon: 'order',
path: '/pages/orders/orders'
},
{
name: 2,
text: '消息',
icon: 'chat',
path: '/pages/chat/chat'
},
{
name: 3,
text: '我的',
icon: 'account',
path: '/pages/me/me'
}
]
// 跑腿员展示的页面
const runnerBar = [{
name: 0,
text: '首页',
icon: 'home',
path: '/pages/index/index'
},
{
name: 1,
text: '接单',
icon: 'car',
path: '/pages/RecOrder/RecOrder'
},
{
name: 2,
text: '订单',
icon: 'order',
path: '/pages/orders/orders'
},
{
name: 3,
text: '消息',
icon: 'chat',
path: '/pages/chat/chat'
},
{
name: 4,
text: '我的',
icon: 'account',
path: '/pages/me/me'
}
]
export {
commonBar,
runnerBar
}
使用Vuex和本地缓存来存储tabbar数据
state: {
// 存储底部导航栏tabbar数据
activeTabbar: uni.getStorageSync('activeTabbar') || [],
// 选中的tabbar tabbar的name值
selectTab: uni.getStorageSync('selectTab') || 0,
},
mutations: {
// 将底部导航栏tabbar数据存储到本地缓存中
SET_TABBAR: (state, payload) => {
state.activeTabbar = payload;
uni.setStorageSync('activeTabbar', payload);
},
// 将当前选中的导航栏name值存储到本地缓存中
SET_CURRENT_TAB: (state, val) => {
state.selectTab = val;
uni.setStorageSync('selectTab', val);
}
}，
actions: {
// 设置当前选中tabbar
setCurrentTab({
commit
}, val) {
commit('SET_CURRENT_TAB', val);
},
// 设置底部tabbr
SetTabbar({
commit
}, payload) {
commit('SET_TABBAR', payload);
}
}
在每个tabbar页都添加以下代码，获取tabbar相关数据
export default {
data() {
return {
// tabber内容
tabbars: this.$store.state.user.activeTabbar,
// 选中的tabbar tabbar的name值
selectTab: this.$store.state.user.selectTab
}
},
methods: {
// 点击当前clickTabbar name值为当前点击tabbar的name值
clickTabbar(name, path) {
this.$store.dispatch('setCurrentTab', name);
uni.reLaunch({path});
}
}
}
各人根据自己代码修改一下获取store中的state数据，我是由于写在了自己的user模块中了。
注意： 在每个tabbar页面加上以上js代码的内容和开头的HTML代码，使得能够获取到tabbar数据和使UI生效
删除pages.json中tabBar的内容
删除或解释pages.json中tabBar部门的内容，使原生tabbar失效
"tabBar": {
"backgroundColor": "#fff",
"selectedColor": "#006eff",
"color": "#666",
// "list": [{
// "iconPath": "/static/icons/home.png",
// "selectedIconPath": "static/icons/home-active.png",
// "text": "首页",
// "pagePath": "pages/index/index"
// },
// {
// "iconPath": "/static/icons/accent_order.png",
// "selectedIconPath": "/static/icons/accent_order_active.png",
// "text": "接单",
// "pagePath": "pages/RecOrder/RecOrder"
// },
// {
// "iconPath": "/static/icons/orders.png",
// "selectedIconPath": "static/icons/orders-active.png",
// "text": "订单",
// "pagePath": "pages/orders/orders"
// },
// {
// "iconPath": "/static/icons/me.png",
// "selectedIconPath": "static/icons/me-active.png",
// "text": "我的",
// "pagePath": "pages/me/me"
// }
// ]
}
选择在符合的地方设置tabBar值
各人根据自己的业务需求，在符合的地方调用Vuex中的action方法给tabBar数据设置值。我这里选择在登录成成功的时间。
// 导入tabBar列表
import {
runnerBar,
commonBar
} from '../../utils/tabbar';
// 登录成功后，处理函数
loginSuccess(result) {
// 设置用户信息
this.$store.dispatch('GetInfo').then(res => {
// 根据角色设置显示的tabbar
const roles = this.$store.state.user.roles;
if (roles.includes('runner') || roles.includes('admin')) {
// 将tabBar列表数据传过去
this.$store.dispatch('SetTabbar', runnerBar);
} else {
this.$store.dispatch("SetTabbar", commonBar);
}
this.$tab.reLaunch('/pages/index/index');
})
}
完结撒花！
这个还是很简单的，就是有不敷的地方，第一次点击底部导航栏，会闪一闪，之后缓存了就没事了，盼望有大神能给出解决意见。有什么不敷的也请各人多多指导，我是小白！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]