uni-app使用uIview的tabbar组件,实现自定义的字体图标

官方组件用法

<u-tabbar
	:value="value1"
	@change="change1"
	:fixed="false"
	:placeholder="false"
	:safeAreaInsetBottom="false"
>
	<u-tabbar-item text="首页" icon="home" @click="click1" ></u-tabbar-item>
	<u-tabbar-item text="放映厅" icon="photo" @click="click1" ></u-tabbar-item>
	<u-tabbar-item text="直播" icon="play-right" @click="click1" ></u-tabbar-item>
	<u-tabbar-item text="我的" icon="a***ount" @click="click1" ></u-tabbar-item>
</u-tabbar>
<!-- js -->
value1: 0,
click1(e) {
	console.log('click1', e);
}

u-tabbar-item的icon属性规定了图标的样子,如下效果:

现在想实现自定义图标,效果如下:

做法步骤:
在阿里字体图标下载你需要的图标,格式为svg,下载两个颜色的,一个是激活的,一个是未激活的。下载好将图标文件放在根目录的static文件夹下。
接着

<u-tabbar-item text="TeleDB"  name="TeleDB">
              		<u-icon slot="active-icon" name="/static/mysql-active.svg"  size="20" ></u-icon>
              		<u-icon slot="inactive-icon" name="/static/mysql-inactive.svg"  size="20"></u-icon>
              	</u-tabbar-item>

这里结合了 uIview的icon组件,slot值 分别规定了激活和未激活的样式。至此,需求得以实现。

转载请说明出处内容投诉
CSS教程网 » uni-app使用uIview的tabbar组件,实现自定义的字体图标

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买