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

devtools/2024/11/14 10:28:28/

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

打开iconfont官网,找到之前添加的图标库,下载png图片
image-20241031010457074
如果需要的图标没有背景色图怎么办?可以使用ps进行填充

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

image-20241106210953838

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

点击编辑选择填充
image-20241106211458867

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

image-20241106211634372

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

image-20241106211730577

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

image-20241106211856836

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

image-20241106212143686

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

image-20241031010637108

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

image-20241031011002450

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

image-20241031011608027

在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"}]}
image-20241031012704758

保存执行到微信小程序查看效果

image-20241031012818169

http://www.ppmy.cn/devtools/132863.html

相关文章

深度学习——前向传播与反向传播、神经网络(前馈神经网络与反馈神经网络)、常见算法概要汇总

文章目录 🌺深度学习面试八股汇总🌺前向传播与反向传播前向传播(Forward Propagation)反向传播(Back Propagation)总结 神经网络简介结构类型前馈神经网络(Feedforward Neural Network, FFNN&am…

【JWT】Asp.Net Core中JWT刷新Token解决方案

Asp.Net Core中JWT刷新Token解决方案 前言方案一:当我们操作某个需要token作为请求头的接口时,返回的数据错误error.response.status === 401,说明我们的token已经过期了。方案二:实现用户无感知的刷新token值,我们希望当响应返回的数据是401身份过期时,响应阻拦器自动帮我…

ArcGIS Pro SDK (二十五)工作流管理器

ArcGIS Pro SDK (二十五)工作流管理器 文章目录 ArcGIS Pro SDK (二十五)工作流管理器1 如何获取管理器对象2 如何获取群组3 如何获取用户4 如何获取作业类型5 如何创建作业6 如何找到工作7 如何获取与地图关联的作业8 如何关闭作业9 如何访问和更改工作信息10 如何在作业上…

什么是python爬虫?

今天就来给大家介绍一下什么是python爬虫。 Python爬虫是一种自动化程序,用于在互联网上浏览和提取信息。它通过模拟人类用户访问网页的行为,发送HTTP请求,获取网页内容,然后解析这些内容以提取所需数据 。以下是关于Python爬虫…

使用纯HTML和CSS绘制圣诞树:打造网页中的冬日奇景

### HTML & CSS 实现节日圣诞树:一步步打造你的冬季主题网页 在这篇文章中,我们将使用纯HTML和CSS创建一棵节日圣诞树。通过简单的代码,您可以在网页上实现一棵带有星星、彩球装饰的圣诞树,为网站增添节日氛围。 ### 实现思…

docker查看容器的ip地址

命令: 如果你经常需要查看容器的 IP 地址,可以使用以下简化命令: docker inspect -f {{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}} 容器iddocker inspect -f {{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}} 119c…

flutter 语法糖库 flutter_magic 发布 1.0.1

众所周知,flutter 是一款由谷歌开发的跨平台工具,一直在开发者心中久负盛名。 但是语法死亡嵌套是个诟病。 最近有 flutter 开发者 panjing,发布了 flutter 语法精简库,flutter_magic,可以让语法变成类似 swiftui 一…

git tag

已经发布了 v1.0 v2.0 v3.0 三个版本,这个时候,我突然想不改现有代码的前提下,在 v2.0 的基础上加个新功能,作为 v4.0 发布。就可以检出 v2.0 的代码作为一个 branch ,然后作为开发分支。 要查看仓库中的所有标签 gi…