【unaipp】tabBar配置/tabBar图标无法显示

bug：注意list配置iconfont我们自定义的图标就会无法显示

	"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","height": "50px","fontSize": "10px","iconWidth": "24px","spacing": "3px","iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+"list": [{"pagePath": "pages/component/index","iconPath": "static/image/icon_component.png","selectedIconPath": "static/image/icon_component_HL.png","text": "组件","iconfont": { // 优先级高于 iconPath，// 该属性依赖 tabbar 根节点的 iconfontSrc"text": "\ue102","selectedText": "\ue103","fontSize": "17px","color": "#000000","selectedColor": "#0000ff"}}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}],"midButton": {"width": "80px","height": "50px","text": "文字","iconPath": "static/image/midButton_iconPath.png","iconWidth": "24px","backgroundImage": "static/image/midButton_backgroundImage.png"}},

tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。

Tips

当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

属性说明：

属性 类型 必填 默认值 描述 平台差异说明

color	HexColor	是		tab 上的文字默认颜色	
selectedColor	HexColor	是		tab 上的文字选中时的颜色	
backgroundColor	HexColor	是		tab 的背景色	
borderStyle	String	否	black	tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值	App 2.3.4+ 、H5 3.0.0+
blurEffect	String	否	none	iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明）	App 2.4.0+ 支持(uni-app x 不支持)、H5 3.0.0+（只有最新版浏览器才支持）
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab	
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持
fontSize	String	否	10px	文字默认大小	App 2.3.4+、H5 3.0.0+
iconWidth	String	否	24px	图标默认宽度（高度等比例缩放）	App 2.3.4+、H5 3.0.0+
spacing	String	否	3px	图标和文字的间距	App 2.3.4+、H5 3.0.0+
height	String	否	50px	tabBar 默认高度	App 2.3.4+、H5 3.0.0+
midButton	Object	否		中间按钮 仅在 list 项为偶数时有效	App 2.3.4+、H5 3.0.0+
iconfontSrc	String	否		list设置 iconfont 属性时，需要指定字体文件路径	App 3.4.4+、H5 3.5.3+
backgroundImage	String	否		设置背景图片,优先级高于 backgroundColor	App
backgroundRepeat	String	否		设置标题栏的背景图平铺方式，可取值："repeat" - 背景图片在垂直方向和水平方向平铺；"repeat-x" - 背景图片在水平方向平铺，垂直方向拉伸；"repeat-y" - 背景图片在垂直方向平铺，水平方向拉伸；"no-repeat" - 背景图片在垂直方向和水平方向都拉伸。 默认使用 "no-repeat"	App
redDotColor	String	否		tabbar上红点颜色	App

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

属性 类型 必填 说明 平台差异

pagePath	String	是	页面路径，必须在 pages 中先定义	
text	String	是	tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标	
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标	
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效	
visible	Boolean	否	该项是否显示，默认显示	App (3.2.10+)、H5 (3.2.10+)
iconfont	Object	否	字体图标，优先级高于 iconPath	App（3.4.4+）、H5 (3.5.3+)

midButton 属性说明

属性 类型 必填 默认值 描述

width	String	否	80px	中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度
height	String	否	50px	中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果
text	String	否		中间按钮的文字
iconPath	String	否		中间按钮的图片路径
iconWidth	String	否	24px	图片宽度（高度等比例缩放）
backgroundImage	String	否		中间按钮的背景图片路径
iconfont	Object	否		字体图标，优先级高于 iconPath	App（3.4.4+）

midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用API：uni.onTabBarMidButtonTap，详见https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap

iconfont参数说明：

属性	类型	说明
text	        String	字库 Unicode 码
selectedText	String	选中后字库 Unicode 码
fontSize	    String	字体图标字号(px)
color	        String	字体图标颜色
selectedColor	String	字体图标选中颜色

tabbar常见问题

tabbar 的 js api 见接口-界面-tabbar，可实现动态显示隐藏（如弹出层无法覆盖tabbar）、内容修改（如国际化）、item加角标等功能。hello uni-app中也有示例。

tabbar 的 item 点击事件见页面生命周期的onTabItemTap。

代码跳转到 tabbar 页面，api只能使用uni.switchTab，不能使用uni.navigateTo、uni.redirectTo；使用navigator组件跳转时必须设置open-type=“switchTab”

tabbar 的默认高度，在不同平台不一样。App端的默认高度在HBuilderX 2.3.4起从56px调整为50px，与H5端统一。开发者也可以自行设定高度，调回56px。详见

tabbar 在H5端是div模拟的，属于前端屏幕窗口的一部分，如果要使用bottom居底定位方式，应该使用css变量–window-bottom，比如悬浮在tabbar上方10px的按钮，样式如下bottom: calc(var(–window-bottom) + 10px)

中间带+号的tabbar模板例子，参考。可跨端，但+号不凸起。如需中间凸起，配置tabbar的midButton。

如果是需要先登录、后进入tab页面，不需要把登录页设为首页，首页仍然是tabbar页，可参考云端一体登录模板

前端弹出遮罩层挡不住tabbar的问题，跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩，可参考这个底部原生图标分享菜单例子

微信小程序模拟器1.02.1904090版有bug，在缩放模拟器页面百分比后，tabbar点击多次后就会卡死。真机无碍，使用时注意。详见

PC宽屏上，当页面存在topWindow或leftWindow或rightWindow等多窗体结构时，若想改变 tabbar 显示的位置，请使用 custom-tab-bar组件 配置，若想隐藏 tabbar，可以使用如下 css（好处是可以和 leftwindow 等窗体联动）：

  .uni-app--showleftwindow + .uni-tabbar-bottom {display: none;}

代码示例

"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/component/index","iconPath": "static/image/icon_component.png","selectedIconPath": "static/image/icon_component_HL.png","text": "组件"}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}]
}

自定义tabbar

原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。

但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。

H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用 custom-tab-bar组件 来自定义
普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。所以这种情况建议使用单页方式。单页方式，如果是复杂页面，应用性能会下降明显，需减少页面复杂度。如果是App端，nvue单页的性能会显著高于vue页面
微信小程序自定义tabbar：微信提供一直基于webview自定义tabBar的方案。该功能体验不佳，不太推荐使用。如果要使用，参考微信文档，项目根创建 custom-tab-bar 目录，注意里边的代码是 wxml,wxss，不是 vue，uni-app编译器会直接拷贝该目录到微信小程序中
原生的tabbar有且只有一个且在首页。二级页如需的tab，需自行编写view来实现。一般二级页面更适合的导航是 segement组件

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/117930.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android | Handler

Android | Handler

Handler 的主要使用场景 子线程完成耗时操作的过程中，通过 Handler 向主线程发送消息 Message，用来更新 UI 界面。因为 Android 是在主线程中更新 UI 的，在主线程出现耗时操作时，就会导致用户界面卡顿，所以我们一般都…
阅读更多...
javascript 设计模式 （ 读书笔记 ）

javascript 设计模式 （ 读书笔记 ）

javascript 设计模式 电子书链接 余杭子曰 用对象收编变量,防止变量覆盖和变量污染 let checkObject {checkEmail: function () {console.log("邮箱校验");},checkPhone: function () {console.log("手机号校验");},checkPasswork: function () {console…
阅读更多...
【Linux】psplash制作Linux开机动画

【Linux】psplash制作Linux开机动画

1. 下载psplash软件 下载psplash源码到ubuntu中： 下载地址：https://git.yoctoproject.org/psplash/commit/安装依赖环境 sudo apt-get install libgdk-pixbuf2.0-dev2. 准备图片 开机动画静态图片：psplash-poky.png开机动画进度条图片&…
阅读更多...
哪些车企AEB标配率「不及格」

哪些车企AEB标配率「不及格」

对于汽车智能化来说，基础安全不分高低配。但实际情况，却是另一番景象。 在全球范围，目前不少国家及地区的监管机构正在考虑将AEB（紧急制动系统）作为乘用车的标配纳入法规，“这是道路安全向前迈出了重要的一…
阅读更多...
2023年9月青少年机器人技术（三级）等级考试试卷-理论综合

2023年9月青少年机器人技术（三级）等级考试试卷-理论综合

2023年9月青少年机器人技术等级考试（三级）理论综合试卷 单选题 第 1 题 单选题 Arduino Nano主控板，通过光敏电阻控制LED灯亮度的变化。电路搭设及程序如下图所示，当光照强度逐渐增强时，LED的亮度逐渐减弱&#xff…
阅读更多...
CentOS 7设置固定IP地址

CentOS 7设置固定IP地址

当我们安装了一个虚拟机或者装了一个系统的时候，经常会遇到需要设置固定ip的情况，本文就以Centos 7为例，讲述如何修改固定IP地址。 1、用ifconfig命令查看使用的网卡 如上图所示，我们就会看到我们目前使用的网卡名称 2、编辑网卡…
阅读更多...
Systemd服务内存占用高的处理

Systemd服务内存占用高的处理

参考文章 ### https://blog.csdn.net/weixin_44821644/article/details/121095406## https://blog.csdn.net/c123m/article/details/124301104 现象 检查 操作系统是4C8G，systemd的内存使用率比较高。操作系统日志没看到异常。很多服务通过systemd托管 ## 检查有…
阅读更多...
(三)（Driver)驱动开发之双机调试环境搭建及内核驱动的运行

(三)（Driver)驱动开发之双机调试环境搭建及内核驱动的运行

文章目录 1. 驱动开发环境搭建2. 驱动开发新建项目及项目属性配置和编译3. 双机调试环境搭建3.1 安装虚拟机VMware3.2 配置Dbgview.exe工具3.3 基于Windbg的双机调试 4. 内核驱动的运行4.1 临时关闭系统驱动签名校验4.2 加载驱动 1. 驱动开发环境搭建 请参考另一篇:https://bl…
阅读更多...
Oracle11gr2 + plsql 配置

Oracle11gr2 + plsql 配置

一、在Oracle中使用cmd窗口进行imp导入文件时，有时会报错IMP-00000: 未成功终止导入。将cmd窗口使用管理员运行，在进行imp导入文件时，又会报imp不是内部或外部命令,也不是可运行的程序。针对这种问题，是环境变量没配置好的原因 1…
阅读更多...
7. Cesium中的Primitive

7. Cesium中的Primitive

1. Primitive 介绍 在 Cesium 中，Primitive 是一种基本的图元，用于呈现 3D 场景中的几何形状、材质和其他属性。 Primitive 由两个部分组成，一个是几何形状（Geometry），用于定义 Primitive 的结构&#xf…
阅读更多...
Guava-RateLimiter详解

Guava-RateLimiter详解

简介： 常用的限流算法有漏桶算法和令牌桶算法，guava的RateLimiter使用的是令牌桶算法，也就是以固定的频率向桶中放入令牌，例如一秒钟10枚令牌，实际业务在每次响应请求之前都从桶中获取令牌，只有取到令牌的请…
阅读更多...
Unity Spine 指定导入新Spine动画的默认材质

Unity Spine 指定导入新Spine动画的默认材质

指定导入新Spine动画的默认材质 找到Spine的Editor导入配置如何修改方法一: 你可以通过脚本 去修改Assets/Editor/SpineSettings.asset文件方法二：通过面板手动设置 找到Spine的Editor导入配置 通常在 Assets/Editor/SpineSettings.asset 配置文件对应着 Edit/Prefe…
阅读更多...
k8s简介以及各个组件

k8s简介以及各个组件

Kubernetes 概述 1、K8S 是什么？ K8S 的全称为 Kubernetes (K12345678S)，PS：“嘛，写全称也太累了吧，不如整个缩写”。 作用： 用于自动部署、扩展和管理“容器化（containerized）应用…
阅读更多...
wxPython 布局调试技巧

wxPython 布局调试技巧

在Show()与MainLoop()直接加入以上代码 import wx.lib.inspection ...frame.Show() wx.lib.inspection.InspectionTool().Show() app.MainLoop()启动后会弹出布局查看工具
阅读更多...
蓝桥杯每日一题2032.10.24

蓝桥杯每日一题2032.10.24

蓝桥杯大赛历届真题 - C 语言 B 组 - 蓝桥云课 (lanqiao.cn) 题目描述 题目分析 由于布局为两个字节为一行&#xff0c;那我们输入两个数就为一行&#xff0c;但是这两个数全部得用二进制进行表示使用bitset bitset:将一个数转化为二进制 bitset<8>:将一个数转化为8位…
阅读更多...
【Unity3D】Unity与Android交互

【Unity3D】Unity与Android交互

1 Unity 发布 apk 1.1 安装 Android Build Support 在 Unity Hub 中打开添加模块窗口&#xff0c;操作如下。 选择 Android Build Support 安装&#xff0c;如下&#xff08;笔者这里已安装过&#xff09;。 创建一个 Unity 项目&#xff0c;依次点击【File→Build Settings→…
阅读更多...
springboot maven项目环境搭建idea

springboot maven项目环境搭建idea

springboot maven项目环境搭建idea 文章目录 springboot maven项目环境搭建idea用到的软件idea下载和安装java下载和安装maven下载和安装安装maven添加JAVA_HOME路径&#xff0c;增加JRE环境修改conf/settings.xml&#xff0c;请参考以下 项目idea配置打开现有项目run或build打…
阅读更多...
ubuntu 安装卸载 deb软件

ubuntu 安装卸载 deb软件

install sudo dpkg -i 软件包名.deb uninstall sudo apt-get remove 软件包名称 reference https://help.ubuntu.com/kubuntu/desktopguide/zh_CN/manual-install.html
阅读更多...
什么是WMS系统条码化管理

什么是WMS系统条码化管理

WMS系统是一种用于仓库管理的信息化系统&#xff0c;旨在提高仓库操作的效率和准确性。而在WMS系统中&#xff0c;条码化管理是一项关键的技术和方法&#xff0c;它通过将商品和物料打上条码&#xff0c;并利用扫描设备进行数据采集和处理&#xff0c;实现了仓库管理的全面自动…
阅读更多...
深度学习模型笔记

深度学习模型笔记

加载和保存模型参数 保存模型参数 net MLP() # 此处省略训练过程&#xff0c;在训练之后&#xff0c;保存模型参数 # 保存字典格式的模型参数&#xff0c;模型参数名 torch.save(net.state_dict(), mlp.params) 加载模型参数 clone MLP() # 加载模型参数 clone.load_state…
阅读更多...
最新文章

Copyright @ 2022~2023