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

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

效果图如下：

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

javascript 复制代码

<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="u-page__item__slot-icon tabbarItemIcon"
			slot="inactive-icon" :style="{backgroundImage: 'url('+item.iconPath+')'}">
		</view>
	</u-tabbar-item>
</u-tabbar>

对上述代码进行解析：

currentIndex：是父组件传递过来的需要选中的下标
fixed：是否固定底部
themeColor：主题色
tabbarChange：切换tabbar的事件

数据来源：

javascript 复制代码

// 将对应的svg导入进来
import {index,category,cart,mine} from "./svgUrls.js"
export default {
	props: {
		// 当前索引
		currentIndex: {
			type: Number,
			default: 0
		},
	},
	data() {
		let that=this;
		return {
			// 主题色
			themeColor:"#0cea39",
			// tabbar数据
			tabbarList: [{
					"pagePath": "/pages/index/index",
					"iconPath": '"' + index+ '"',
					"selectedIconPath": that.changeColor('"' + index+ '"'),
					"text": "首页"
				},
				{
					"pagePath": "/pages/category/category",
					"iconPath": '"' + category + '"',
					"selectedIconPath": that.changeColor('"' + category + '"'),
					"text": "分类"
				},
				{
					"pagePath": "/pages/cart/cart",
					"iconPath": '"' + cart + '"',
					"selectedIconPath": that.changeColor('"' + cart + '"'),
					"text": "购物车"
				},
				{
					"pagePath": "/pages/mine/mine",
					"iconPath": '"' + mine+ '"',
					"selectedIconPath": that.changeColor('"' + mine+ '"'),
					"text": "我的"
				}
			],
		}
	},
	methods:{
		// 改变svg的颜色
		changeColor(url) {
			let res = url.replace(/%23[a-zA-Z0-9]{6}/g, this.themeColor.replace("#", "%23"));
			return res;
		},
	}
}

各个图标的svg格式存放在svgUrls.js文件内[可随意存放位置和更改名称]

javascript 复制代码

// 这里代码偏多只展示index的，其他的自行填写
export const index="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81 81'%3E%3Cpath fill='%23909399' d='M13.19 44.83q-2.2.22-4.06-.69c-5.39-2.66-2.57-7.5.45-10.58 6.53-6.65 12.91-13.44 19.17-20.22q4.55-4.92 7.17-5.97c5.22-2.09 9.59.32 13.07 4.11q10.02 10.86 20.33 21.39c3.01 3.07 6.79 7.92 1.43 11.04q-2.12 1.23-4.76.86a.42.41 4.4 0 0-.47.4q-.17 8.72.02 18.34c.11 5.46-2.48 9.51-8.21 9.69q-9.35.29-33.94.12-9.43-.06-9.37-9.61.06-8.97.05-18.08 0-.88-.88-.8zm4.99-3.29q-.01 11.32-.01 23.46 0 3.3 3 4.01 1.53.36 3.7.35 16.19-.04 31.43-.09 5.01-.02 5-4.56-.05-11.31-.04-23.28 0-.62.62-.62c1.91 0 4.74.36 6.5-.26q1.79-.62.49-2-12.48-13.32-23.61-24.91-5.59-5.81-11.15.02-11.96 12.56-23.82 25.18a1.12 1.12 0 0 0 .79 1.89l6.49.18q.61.02.61.63z'/%3E%3Cpath fill='%23909399' d='M40.23 41.22c6.2-5.65 13.84 3.37 7.01 8.95q-3.62 2.95-7.03 5.96-.47.41-.93.01-3.51-3.02-7.45-6.4c-6.15-5.26 1.24-14.1 7.44-8.52q.48.43.96 0z'/%3E%3C/svg%3E";

export const category ="";

export const cart ="";

export const mine="";

比如说index的数据格式是如何来的。

首先：如果你没有svg格式，而是图片格式，那么你需要将图片格式转换为svg格式，可自行搜索转换工具，如果是svg格式则忽略。

其次：当前是svg格式，需要将svg格式进行转换为data:image/svg+xml,这种是css转义，不是base代码。

最后：转义完成后赋值给上面的变量即可。

这样就可以动态修改tabbar的字体和svg图标的颜色啦。