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

最新推荐文章于 2024-08-07 22:38:02 发布

前端的小恬儿妹

最新推荐文章于 2024-08-07 22:38:02 发布

阅读量9.2k

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_39513971/article/details/79081753

版权

小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

简单粗暴：

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端的小恬儿妹

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

一招解决iconfont图标与文字对不齐的问题

weixin_42539854的博客

11-18

2511

1.用相对定位解决 position: relative; top: 0; left: 0; top和left的值根据情况调节 2.垂直对齐方式 vertical-align 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。 vertical-align: middle; 把此元素放置在父元素的中部。详细解释 ...

如何修改Notifation Action Button的Icon和Text的位置

andylao62的专栏

11-15

709

在阿拉伯,波斯等RTL语言下，对于一些含有action button的UI虽然app使用了android:supportsRtl属性，但是仅仅是action之间的位置发生翻转，而每个button的Icon和Text位置却没调换。比如(下图所示)未接来电的systemui下拉通知栏的icon和text位置没有调换如果要调整其位置，可以通过setTextView

2 条评论您还未登录，请先登录后发表或查看评论

微信小程序 - 自定义底部菜单栏

最新发布

觉醒法师的专栏

08-07

1936

微信小程序底部菜单栏是可以通过自定义来实现的。主要涉及：新建组件、编写组件代码、设置样式、配置导航栏、在页面中引用。自定义底部导航栏可以创建出符合项目设计需求效果，实现个性化的页面切换功能。

【微信小程序-原生开发】实用教程07 - Grid 宫格导航，详情页，侧边导航（含自定义页面顶部导航文字）

朝阳39的博客

01-29

2245

Grid 宫格导航，详情页，侧边导航（含自定义页面顶部导航文字）

小程序 底部导航栏(tabBar)图标的正确做法

黄河爱浪的博客-专注CSS,jQuery,uni-app领域

05-13

2万+

许多人都认为小程序系统的底部导航栏特别不好看，为了美观而选择自定义，从此身陷漩涡无法自拔。其实真正的原因是图标的图片处理不当（说白了就是前端和设计太菜了），导致会有线条变粗，间距不当的视觉感受。除小程序外 uni-app框架开发的 app也可参照本篇文章中的方法进行调整 小程序中自定义底部导航是非常不明确的选择，小编有发布过一篇《说一说要求 小程序自定义导航栏的产品有多沙雕》，文章地址：https://blog.csdn.net/u013350495/article/details/105645..

怎样控制小程序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...

微信小程序 自定义底部导航栏

开发路上的AZhe

09-16

1818

自定义底部导航需写一个共用模板：（名称自定义） <template name="nav"> <view class="nav_link" bindtap="{{fn}}"> <button class="defalut_btn {{current==0?'':'on_cor'}}...

小程序自定义导航栏适配

Miku的博客

10-13

704

小程序自定义导航栏适配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的导航栏和安卓

微信小程序自定义导航栏（含代码&效果图）

sinat_28384025的博客

10-26

1360

做成组件，方便多页面引用 app.js的onLaunch里取得状态栏胶囊的信息并存到全局变量globalData app.js onLaunch: function(option) { var that = this //设置导航栏信息 this.getNavBarInfo() }, getNavBarInfo() { // 获取系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位

android 自定义导航栏,【详细】手把手教你快速实现Android底部导航栏

weixin_42299205的博客

05-25

2151

1. 实现底部的Tab,自定义TabContainerView 继承 RelativeLayout，这是我们最终封装的View工具类。其内部主要由viewpager和底部的TabHost类组成。ViewPager初始化contentViewPager = new ViewPager(context);LayoutParams contentVpLp = new LayoutParams(ViewG...

微信小程序自定义底部导航栏的代码

03-28

在微信小程序中，自定义底部导航栏的代码如下： ```html <image class="tab-icon" src="{{item.icon}}" /> <text class="tab-title">{{item.title}} ``` 在上面的代码中，我们使用了一个 `view` 标签作为...

VUE中icon图标与文字不齐

tao_meng_的博客

02-02

3920

VUE中icon图标与文字不齐最近在使用vant组件引用了某个icon之后发现与文字对不齐，找到了一个最简便的办法就是直接给icon加上属性vertical-align: -10% <van-icon name="browsing-history" style="vertical-align: -10%"/>文字再次点开发现已经对齐了 ...

react ui框架移动端_移动端UI设计规范整理汇总

weixin_39628864的博客

12-03

1404

本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。目录界面设计尺寸及栏高度边距和间距内容布局界面图片设计比例建立统一风格的图标APP版式设计规范界面文字设计规范设计适配切图规范设计稿标注一、界面设计尺寸及栏高度目前主流的 iOS 设备主要有 iPhone SE(4英寸)、iPho...

微信小程序入门四: 导航栏样式、tabBar导航栏

热门推荐

王乐平技术博客

01-12

13万+

实例内容导航栏样式设置 tabBar导航栏实例一：导航栏样式设置小程序的导航栏样式在app.json中定义。这里设置导航，背景黑色，文字白色，文字内容测试小程序app.json内容：{ "pages":[ "pages/index/index", "pages/login/login", "pages/logs/logs" ], "window":{

小程序文字沉底居中

张飞鹏的博客

07-03

1301

css样式 .a{ position: fixed; text-align: center; bottom: 30rpx; left: 0; right: 0; } 实现效果

Android 8~Android 11 去掉 Launcher3 默认给 icon 增加的白边

cczhengv

06-26

8449

前言如果你还不知道 icon 白边是什么的话，请移步这篇 Android应用图标微技巧，8.0系统中应用图标的适配看一下为了避免 app 图标适配的工作，手里有源码就是爽，我们可以修改源码把这个白边去掉，如果你没有源码就老老实实按照上面博客的方法进行适配吧。修改前效果修改后效果思路从上文的博客介绍可以得知只要 app 的 AndroidManifest.xml 中 target...

小程序tabBar图标显示太大

meteorites的博客

10-16

2万+

有两种解决方案, 1.重写tabBar, (自定义) 这个方法相对太麻烦了,对于新手来说不太容易控制 2. 设计图标样式规范, (所切的png图片,给它里面留下相应尺寸的空白) 看下图下载此图片查看, png格式的图片, 在切图时,不要紧贴图像切, 流出相应比例的空白....

微信小程序把玩(三)tabBar底部导航

FUCK

09-24

10万+

tabBar相对而言用的还是比较多的，但是用起来并没有难，在app.json中配置下tabBar即可，注意tabBar至少需要两个最多五个Item选项主要属性：对于tabBar整体属性设置：对于tabBar中每个Item属性设置：下面是官网一张图对tabBar描述：app.json的配置相对就简单了：

小程序导航栏icon图标

02-04

小程序导航栏icon图标是小程序界面中用来标识不同功能页面的图标，通常位于导航栏的左侧或右侧。它们可以是简洁、直观的小图标，用来帮助用户快速识别和选择不同的功能页面。 小程序导航栏icon图标的设计应该符合用户习惯和界面风格。它们应当具有辨识度高、易于理解的特点，能够简洁地表达不同的功能。一般来说，选择常见的符号或者与功能内容相关的图标可以更好地与用户产生共鸣。在设计上，建议使用简洁明了的线条或者实心形式，避免过于复杂或细节过多的图案。颜色上可以选择与小程序整体色调搭配或者使用对比明显的颜色，以突出图标的功能并增强辨识度。此外，图标的排列顺序也需要考虑用户的使用习惯。根据功能的重要性和使用频率，可以将常用的功能放置在导航栏的更显眼的位置上，以方便用户的快速导航。总之，小程序导航栏icon图标在设计上应该符合用户的直觉，能够通过简洁明了的形式表达不同的功能。通过合理的颜色和排列顺序，帮助用户快速识别和选择所需的功能页面，提高用户的使用体验。