uniapp在自定义tabbar上动态修改svg图标颜色和字体颜色

最新推荐文章于 2025-03-16 00:38:05 发布

哇，女前端哎！

最新推荐文章于 2025-03-16 00:38:05 发布

阅读量2.6k

点赞数 5

分类专栏： uniapp 文章标签： uni-app 前端

本文链接：https://blog.csdn.net/Handsome_gir/article/details/139505235

版权

需求：在uniapp项目内，自定义tabbar，需要将图标更换成svg格式，可动态修改图标及字体颜色。

效果图如下：

请添加图片描述

我使用的是uniapp结合uview2的组件使用，代码如下：

<u-tabbar :value="currentIndex" @change="tabbarChange" :fixed="true" :activeColor="themeColor"
			:safeAreaInsetBottom="true" zIndex='99'>
	<u-tabbar-item v-for="(item,index) in tabbarList" :key="index" :text="item.text"
		:badge="item.isBadge?carNum:''">
		<!-- 选中的svg -->
		<view class="u-page__item__slot-icon tabbarItemIcon"
			slot="active-icon" :style="{backgroundImage: 'url('+item.selectedIconPath+')'}">
		</view>
		<!-- 未选中的svg -->
		<view class=