小程序 底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔。其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受。
除小程序外 uni-app 框架开发的 app 也可参照本篇文章中的方法进行调整
小程序中自定义底部导航是非常不明智的选择,小编有发布过一篇《说一说要求 小程序自定义导航栏 的需求有多沙雕》,文章地址:说一说要求 小程序自定义导航栏 的产品有多沙雕_黄河爱浪的博客-CSDN博客。可以阅读一下,文章中说明了自定义带来的种种问题。且是无法解决的问题。
如果因特殊业务需求,一定要去实现自定义导航栏可以阅读小编发布的《微信小程序 自定义tabBar(底部导航栏)》,文章地址:微信小程序 自定义tabBar(底部导航栏)_黄河爱浪的博客-CSDN博客。文章中有详细的实现过程及源码下载。
示例效果源码:uniapp-extend: uni-app 插件 / 模板分享
进入本篇文章的主题,底部导航栏(tabBar)图标的正确做法。先看下面的对比图片,图片从 iconfont 下载。
未按官方要求处理的情况下的实际效果截图
已按官方要求处理的情况下的实际效果截图
经由上面的图片对比,同样的图片,按官方标准处理过后,不管是图片的清晰度,间距不当的问题都有明显的改善。
图片处理前缩略图预览
图片处理后缩略图预览
对比过后,开始说一说图片的处理方法
- 图片的标准尺寸为 81px * 81px,该尺寸在官方的文档中有明确的说明,可以参考微信小程序全局配置文档中对 iconPath 属性的说明。
- 为了保持良好的间距,图片的内容区域设置 60px 比较好,给4个方向各留10px的边距。
参照上面的处理方法,将图片重新设置尺寸后,你会发现,图标的线条会变的更加清晰。
作者:黄河爱浪
本文原创,著作权归作者所有,转载请注明原链接及出处。
小程序 底部导航栏(tabBar)图标的正确做法相关推荐
- 小程序底部导航栏配置以及自定义导航栏
小程序底部导航栏可在根目录下的 app.json 文件进行全局配置,但是部分情况下需要我们自己进行自定义. ** 一 :在app.json 文件进行全局配置** {"pages": ...
- 微信小程序-底部导航栏
注册一个小程序appId,新建自己的项目,了解小程序的框架结构. 制作底部导航栏时,添加导航按钮关联页面,注意配置在app.json配置page时,要把第一个导航按钮页面放在第一个位,不然其他页面会覆 ...
- 自定义微信小程序底部导航栏
效果 目录 1.在根目录创建custom-tab-bar文件夹 (1)index.js Component({data: {selected: 0,color: "#59595b" ...
- 小程序底部导航栏动态生成
1.在app.json中增加关于底部导航栏的设置 "tabBar": {"custom": true,//这个要有,设置启用自定义tabbar"col ...
- 使用微信开发者工具添加小程序底部导航栏报错
粉丝求助: 示例图: 看了这个页面,很明显这个页面引用的路径都有问题. 解决办法:
- 说一说要求 小程序自定义导航栏 的需求有多沙雕
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在 超级App 内被便捷地获取和传播,同时具有出色的使用体验. 在小程序项目中 自定义导航栏 绝对算得上是最恶心的需求之一.本篇文章 ...
- 微信小程序 实现底部导航栏tabbar
参考链接: (1)微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html (2)小程序自定义tabbar实现中间图标突出效 ...
- 微信小程序底部导航Tabbar
1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 2,对于底部导航栏,小程序 ...
- 小程序tabbar能放分包路径吗_微信小程序底部导航Tabbar
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
最新文章
- 5.2 FIR滤波器的卷积(脉冲响应、频率响应,幅频响应,暂态-搞不清楚的有救了啊)
- python矩阵运算numpy_Python Numpy中的几个矩阵乘法
- SpringMVC对Ajax请求的处理
- Scrapy安装介绍
- python 温度 符号_Python通过小实例入门学习---1.0(温度转换)
- linux系统管理实验报告总结_Linux系统:常用Linux系统管理命令总结
- UnicodeDecodeError(转)
- Servlet的Cookie和Session机制
- java list 差集_Java基础之集合框架
- 莫烦python进化算法_使用遗传算法解决TSP问题(莫烦python 学习笔记)
- postman如何使用mockserver?
- Word一行排列多个图片并插入题注
- iOS APP 上架审核过程中常见问题整理
- 数值分析-有关迭代法
- signature=1eff1aaee251c280dde2d73a420031b7,Signature of the orthogonal companion in Kreĭn spaces.
- Hadoop集群的安装
- 《动手学深度学习》Task09:目标检测基础+图像风格迁移+图像分类案例1
- 2022生物发酵展(济南)紧扣行业脉搏,把握市场动向,突破变局
- STM32F103ZET6驱动57闭环步进电机(连线+代码)
- 实验14-SPSS-对应分析-研究品牌和品牌形象之间的关系