许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔。其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受。
小程序中自定义底部导航是非常不明确的选择,小编有发布过一篇《说一说要求 小程序自定义导航栏 的产品有多沙雕》,文章地址:https://blog.csdn.net/u013350495/article/details/105645427。可以阅读一下,文章中说明了自定义带来的种种问题。且是无法解决的问题。
如果因特殊业务需求,一定要去实现自定义导航栏可以阅读小编发布的《微信小程序 自定义tabBar(底部导航栏)》,文章地址:https://blog.csdn.net/u013350495/article/details/105757452。文章中有详细的实现过程及源码下载。
进入本篇文章的主题,底部导航栏(tabBar)图标的正确做法。先看下面的对比图片,图片从 iconfont 下载。
经由上面的图片对比,同样的图片,按官方标准处理过后,不管是图片的清晰度,间距不当的问题都有明显的改善。
对比过后,开始说一说图片的处理方法
参照上面的处理方法,将图片重新设置尺寸后,你会发现,图标的线条会变的更加清晰。
作者:黄河爱浪 QQ:1846492969,邮箱:[email protected]
本文原创,著作权归作者所有,转载请注明原链接及出处。