小程序底部导航栏icon和文字的间距问题

最新推荐文章于 2024-10-14 17:03:38 发布
最新推荐文章于 2024-10-14 17:03:38 发布
阅读量9.3k 收藏
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39513971/article/details/79081753
版权

小程序开发过程中真是一个坑接着一个的坑。先解决一下底部导航栏icon遇到的问题：

icon与下方文字距离太近，导致整体效果太差。那怎么办呢？

简单粗暴：

切图时候把icon上下留白，保存为png格式即可

前端的小恬儿妹
关注
专栏目录
微信小程序 自定义底部导航栏
开发路上的AZhe
09-16 1845
自定义底部导航需写一个共用模板： （名称自定义） <template name="nav"> <view class="nav_link" bindtap="{{fn}}"> <button class="defalut_btn {{current==0?'':'on_cor'}}...
小程序自定义导航栏适配
Miku的博客
10-13 730
小程序自定义导航栏适配1、页面JSON配置2、高度计算3、nav.js代码4、nav.wxml代码5、nav.wxss代码6、wxml页面使用 1、页面JSON配置 由于微信小程序自带的导航栏不能够完全满足开发的需求，所以需要使用自定义导航栏，因此记录一下，以便以后使用 { "usingComponents": { "my-nav": "/components/nav/nav" }, "navigationStyle": "custom" } 2、高度计算 由于IOS的导航栏和安卓
一招解决iconfont图标与文字对不齐的问题
weixin_42539854的博客
11-18 2620
1.用相对定位解决 position: relative; top: 0; left: 0; top和left的值根据情况调节 2.垂直对齐方式 vertical-align 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。 vertical-align: middle; 把此元素放置在父元素的中部。 详细解释 ...
如何修改Notifation Action Button的Icon和Text的位置
andylao62的专栏
11-15 725
在阿拉伯,波斯等RTL语言下，对于一些含有action button的UI虽然app使用了android:supportsRtl属性，但是仅仅是action之间的位置发生翻转，而每个button的Icon和Text位置却没调换。 比如(下图所示)未接来电的systemui下拉通知栏的icon和text位置没有调换 如果要调整其位置，可以通过setTextView
小程序底部导航按钮实现
最新发布
Wangguang_的博客
10-14 468
新建一个小程序项目，我是创建了JS模板，项目创建完成后需要新建五个文件夹，其中四个（page子文件夹）用于存放pages文件，一个sources文件夹（与pages同级）用于存放资源文件，如图标文件。需要在app.json中添加以下配置信息，其中tabBar是新增的，其余均为系统默认生成。图标需要8个，因为选中的图标和未选中的图标需要进行区分。商城小程序需要四个底部导航按钮，遂记录一下实现过程。图标文件源于阿里巴巴矢量图库。最终实现效果如下所示。
【微信小程序-原生开发】实用教程07 - Grid 宫格导航，详情页，侧边导航（含自定义页面顶部导航文字）
朝阳39的博客
01-29 2335
Grid 宫格导航，详情页，侧边导航（含自定义页面顶部导航文字）
小程序 底部导航栏(tabBar)图标的正确做法
热门推荐
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
05-13 2万+
许多人都认为小程序系统的底部导航栏特别不好看，为了美观而选择自定义，从此身陷漩涡无法自拔。其实真正的原因是图标的图片处理不当（说白了就是前端和设计太菜了），导致会有线条变粗，间距不当的视觉感受。 除小程序外 uni-app框架开发的 app也可参照本篇文章中的方法进行调整 小程序中自定义底部导航是非常不明确的选择，小编有发布过一篇《说一说要求 小程序自定义导航栏 的产品有多沙雕》，文章地址：https://blog.csdn.net/u013350495/article/details/105645..
微信小程序设置 tabbar icon 大小
资深全栈开发工程师
07-09 1万+
将 tabbar icon 图片制作成合适的尺寸：你可以使用设计工具（如 Photoshop、Sketch 等）将图标调整为合适的大小。在 app.json 文件中设置 tabbar 图标大小：在 app.json 文件的 tabBar 字段中设置 iconSize 属性，可以控制 tabbar 图标的大小。因此，建议根据实际需求和设计准则选择合适的图标大小，并进行适当的调整。在上面的示例中，iconSize 属性被设置为 48，这将使 tabbar 图标的大小为 48x48 像素。
微信小程序自定义导航栏（含代码&效果图）
sinat_28384025的博客
10-26 1386
做成组件，方便多页面引用 app.js的onLaunch里取得状态栏胶囊的信息并存到全局变量globalData app.js onLaunch: function(option) { var that = this //设置导航栏信息 this.getNavBarInfo() }, getNavBarInfo() { // 获取系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位
小程序底部导航栏
勉后之幸
11-07 384
关于底部导航栏，是非常常见和使用的一个功能，刚学习，通过查阅资料，最终解决问题。在此记录下，方便查看。 首先需要把要跳转的页面写好，在此就不细说了。 其次在配置文件app.json里面写好需要展示的页面，把默认的页面放在第一个。如图 "pages": [ "pages/test/test", "pages/my/my", "pages/lists/lists" ...
android 自定义导航栏,【详细】手把手教你快速实现Android底部导航栏
weixin_42299205的博客
05-25 2197
1. 实现底部的Tab,自定义TabContainerView 继承 RelativeLayout，这是我们最终封装的View工具类。其内部主要由viewpager和底部的TabHost类组成。ViewPager初始化contentViewPager = new ViewPager(context);LayoutParams contentVpLp = new LayoutParams(ViewG...
怎样控制小程序tabbar图标大小_微信小程序tabBar的基本设置-微信小程序tabbar字体大小-微信小程序tabbar高度...
weixin_39946798的博客
12-21 1万+
1.app.json2.当我们想要在小程序中实现下面的效果的时候，可以使用tabBar3.从图片中可以看到tab的结构：4.1、3个可选的tab：5.list:使用tabBar对象中的list对象数组属性来控制，list数组中的每个元素(对象),{"pages":["pages/index/index","pages/publish/index","pages/user/index"],"tabB...
VUE中icon图标与文字不齐
tao_meng_的博客
02-02 3999
VUE中icon图标与文字不齐 最近在使用vant组件引用了某个icon之后发现与文字对不齐，找到了一个最简便的办法就是直接给icon加上属性vertical-align: -10% <van-icon name="browsing-history" style="vertical-align: -10%"/>文字 再次点开发现已经对齐了 ...
react ui框架 移动端_移动端UI设计规范整理汇总
weixin_39628864的博客
12-03 1426
本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。目录界面设计尺寸及栏高度边距和间距内容布局界面图片设计比例建立统一风格的图标APP版式设计规范界面文字设计规范设计适配切图规范设计稿标注一、界面设计尺寸及栏高度目前主流的 iOS 设备主要有 iPhone SE(4英寸)、iPho...
小程序（三）配置tabbar及自定义tabbar样式
09-26
关于tabbar部分，官方文档是有明确的说明的，当然，我这里是不存在把官方文档给你复制一遍的情况。我大概把我再看官方文档过程中遇到的坑，大概复述一下。 一：配置tabbar 这个主要是使用小程序自带的tabbar，在项目根目录下的app.json中配置，这个简单配置一下就可以了。
支付宝小程序tabbar底部导航
12-12
支付宝小程序重写tabbar底部导航，供大家参考，具体内容如下 1.app.js中代码如下 editTabBar: function () { var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.route; console.log(t) console.log(s) 0 != s.indexOf("/") && (s = "/" + s); for (var n in e.items) e.items[n].selected = !1, e.items[n]
微信小程序自定义底部导航栏的代码
03-28
在微信小程序中，自定义底部导航栏的代码如下： ```html <image class="tab-icon" src="{{item.icon}}" /> <text class="tab-title">{{item.title}} ``` 在上面的代码中，我们使用了一个 `view` 标签作为...
Android微信支付宝的底部导航栏是怎么做的？简单的导航栏蕴藏着大智慧！
qq_36523667的博客
11-29 3119
常见做法1： 套框架 常见做法2： 在底部写一个水平的LinearLayout作为导航栏，每个Item又是一个垂直的LinearLayout。 。。。 不是说上述做法不好。 做法1不能满足个性定制的需求 做法2嵌套层级太多，拖慢了性能；MainActivity中做事太多，负荷太大 正确做法： 为了维护，我们的模块化原子化是前期开发时必不可少的工作。
小程序tabBar图标显示太大
meteorites的博客
10-16 2万+
有两种解决方案, 1.重写tabBar, (自定义) 这个方法相对太麻烦了,对于新手来说不太容易控制 2. 设计图标样式规范, (所切的png图片,给它里面留下相应尺寸的空白) 看下图 下载此图片查看, png格式的图片, 在切图时,不要紧贴图像切, 流出相应比例的空白....
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值