uni-app 实现动态图标 ( 图标编码变量模式 )

在 uni-app 中利用 rich-text 组件可以实现图标的动态化，

演示代码 :

<template>
	<view class="gui-margin">
		<view class="gui-margin-top">
			<rich-text :nodes="icon" type="text" class="gui-icons"></rich-text>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			icon:'<span>图标编码</span>'
		}
	},
	onLoad:function(){
		setTimeout(()=>{
			this.icon = '<span>图标编码</span>'
		}, 2000);
	}
}
</script>
<style scoped>
.gui-card-item{margin-right:20rpx;}
</style>

通过上面的代码我们就可以实现图标的动态展示与切换，核心工作是对 rich-text 组件的动态赋值。

rich-text 组件官网

https://uniapp.dcloud.io/component/rich-text