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

原创

已于 2025-07-18 09:22:40 修改 · 1.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #android #java

于 2025-07-18 09:22:25 首次发布

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>