uni-app开发 自定义底部Tap等基础使用与介绍

目录

前言

介绍

页面路由

介绍

底部 tab 的表现

效果图

基础使用

固有必须属性

list

结语

---

 我来说说uin-app的一些操作 在此之前 介绍一些uni-app吧

前言

---

介绍

uni-app：一码在手，多端无忧

随着移动互联网的深入发展，开发者们对于跨平台应用开发的追求愈发迫切。在这一背景下，uni-app以其独特的优势和强大的功能，成为了众多开发者的首选工具。

uni-app是一个使用Vue.js开发所有前端应用的框架，它真正做到了“编写一次，发布到多个平台”。开发者只需编写一套代码，就可以发布到iOS、Android、H5以及各种小程序（微信/支付宝/百度/头条/QQ/快应用等）等多个平台，大大提升了开发效率。

uni-app不仅提供了丰富的组件库和强大的API接口，还具备出色的性能表现和优秀的用户体验。它支持条件编译和分包技术，可以优化应用的体积和加载速度，为用户提供流畅的使用体验。

在CSDN这个汇聚了众多技术精英的平台上，我们将深入剖析uni-app的技术原理和使用技巧，分享开发者们的实践经验和心得。无论你是uni-app的新手还是资深用户，都能在这里找到有价值的信息和资源，与同行一起交流学习，共同推动跨平台应用开发领域的发展。让我们携手共进，迎接uni-app带来的无限可能！

---

页面路由

介绍

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置

我们今天主要说的是这其中的地步tap的使用等

---

底部 tab 的表现

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

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

效果图

基础使用

"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": "接口"
	}]
}

uni-app 允许你轻松地在应用中添加底部导航栏（Tab Bar）。首先，在 pages.json 文件中，你可以定义 tabBar 字段来配置底部导航栏的样式和页面链接。例如，你可以设置 list 数组来定义每个 Tab 的标题、图标和对应的页面路径。

接下来，在对应的 Vue 页面中，你可以编写具体的页面内容。当用户点击底部导航栏的某个 Tab 时，uni-app 会自动切换到对应的页面。

自定义底部导航栏不仅让应用看起来更专业，还提供了用户友好的导航体验。通过简单的配置和编写，你就能轻松地为 uni-app 应用添加底部导航栏功能。

我们先在新创建好的项目文件夹中找到这个页面路由文件

在全局应用配置下面添加这个底部tap块

然后我们就能对其自定义了 

固有必须属性

属性	类型	必须		描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab

这些属性是必须的 不然会出错的

剩下详细的底部tap内容可以在uni-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+)

每个数组项代表一个Tab，需要包含pagePath（页面路径）、text（Tab上显示的文字）和iconPath（未选中时的图标路径）、selectedIconPath（选中时的图标路径）等属性。

我们就可通过这种方式进行我们自行想要的底部tap自定义了

非常好用

结语

在uni-app的开发过程中，底部Tab（TabBar）的设计与实现是提升用户体验的关键一环。通过pages.json中的tabBar配置，我们可以轻松地为应用添加底部导航栏，并通过list属性定义各个Tab的页面路径、显示文本和图标。

在配置过程中，确保每个Tab的pagePath指向正确的页面，同时提供清晰易懂的text和具有辨识度的iconPath与selectedIconPath，能够帮助用户更快地定位和切换至目标页面。

底部Tab的设计不仅要考虑美观性，更要注重实用性和用户体验。合理的布局和流畅的操作能极大地提升用户对应用的满意度。希望本文的结语能为您在uni-app开发中更好地应用底部Tab提供一些启示和帮助