uniapp+vue2——自定义底部导航tabbar

1、样式

不同角色权限展示不同的底部

2、组件代码

<template><view class="container"><view style="height: 150rpx;"></view><view class="tabbar"><view v-for="(item, index) in list" :key="index" class="tab-item":class="{ active: current === item.value }" @click="navigateTo(item)"><image :src="current === item.value ? item.selectedIconPath : item.iconPath" class="tab-icon" /><text class="tab-text">{{ item.text }}</text></view>