当前位置：首页 > article >正文

Uniapp底部导航栏设置（附带PS填充图标教程）

article 2024/12/25 2:09:42

首先需要注册和登录ifconfont官网，然后创建项目添加需要的图标
创建和添加图标库请参考：Uniapp在Vue环境中引入iconfont图标库（详细教程）

打开iconfont官网，找到之前添加的图标库，下载png图片

如果需要的图标没有背景色图怎么办？可以使用ps进行填充

使用PS打开png图片，用吸管获取原图标颜色，然后使用魔术棒进行填充（此处使用PS2023版本，也可以自己使用画图工具填充背景）

使用魔棒选中需要填充的部分
在这里插入图片描述

点击编辑选择填充

边框缝隙会有空白，再次选择外边框进行填充

此时可以看到图标底色已经填充完成

另存为png图标，给图标加入fill开头保存

重复上述步骤，依次完成对图标填充即可

在static文件夹下新建tabbar文件夹，存放底部导航栏图片。将已经得到的icon图片拉入

在pages下新建index、class、cart、my四个页面

打开pages.json文件，将之前测试用的test页面放入最下方，uniapp会根据数组配置顺序进行页面启动，默认第一个页面是首页，在使用tabbar后首页必须和第一页对应，实际项目开发中建议页面顺序也对应好，标题页也和内容相对应，方便后期维护。

在pages.json文件添加tabbar底部导航栏属性，包括页面路径、页面标题、未选择时图标（无底色）、选择时图标（有底色）

注意：如果此处底部导航栏无法显示，请检查页面路径和图片路径是否都设置正确，如果有一个设置错误将无法正常运行。

	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"text": "首页",
			"iconPath": "static/tabbar/shouye.png",
			"selectedIconPath": "static/tabbar/fill-shouye.png"

		}, {
			"pagePath": "pages/class/class",
			"text": "分类",
			"iconPath": "static/tabbar/fenlei.png",
			"selectedIconPath": "static/tabbar/fill-fenlei.png"

		}, {
			"pagePath": "pages/cart/cart",
			"text": "购物车",
			"iconPath": "static/tabbar/gouwuche.png",
			"selectedIconPath": "static/tabbar/fill-gouwuche.png"

		}, {
			"pagePath": "pages/my/my",
			"text": "我的",
			"iconPath": "static/tabbar/wode.png",
			"selectedIconPath": "static/tabbar/fill-wode.png"

		}]
	}