uni-app配置tabBar

已于 2024-04-14 11:51:44 修改
阅读量936 收藏 3
点赞数 1
分类专栏： uni-app 小程序 文章标签： uni-app 微信小程序
于 2024-04-13 23:18:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oracle475/article/details/137724993
版权
这篇文章详细介绍了在uni-app项目中，如何在pages.json文件中配置tabBar，以便在应用中设置首页和分类等页面的跳转和图标显示。
摘要由CSDN通过智能技术生成
  • 文档

uni-app官网•全局文件•pages.json页面路由icon-default.png?t=N7T8https://uniapp.dcloud.net.cn/collocation/pages#tabbar

  • 步骤

1.在pages文件夹中定义页面

2.在pages.json文件中的tabBar节点配置

"tabBar": {
	"list": [
		{
			"pagePath": "pages/home/home",
			"iconPath": "static/icons8-首页-24.png",
			"selectedIconPath": "static/icons8-首页-24 (1).png",
			"text": "首页"
		},
		{
			"pagePath": "pages/classify/classify",
			"iconPath": "static/icons8-分类-32.png",
			"selectedIconPath": "static/icons8-分类-32 (1).png",
			"text": "分类"
		}
	]
}

示例：

  • 示例

云海洋和天
关注
专栏目录
uni-app关于tabBar配置
LW0512的博客
05-20 1万+
uni-app项目页面底部导航栏 使用步骤 1，在pages中创建三个tabba页面，并在页面添加一些要显示出来的东西 2， 在pages.json文件里面配置文件页面路由 正常的话这三个tabbar页面也需要在tabBar 中的 list 是一个数组，最少2个、最多5个，但在这里暂时不用 3，先在home页引入底部tabbar导航 import tablebox from '../../../components/tablebox.vue'; tablebox.vue <templ...
uni - app 配置 tabBar 导航菜单
qq_25906119的博客
02-01 366
uni - app tabbar配置，及页面跳转
uni-app - - - - - 自定义tabbar
Dark_programmer的博客
08-27 1260
uni-app - - - - - 自定义tabbar
uni-app开发---3.tabBar
he123456lei的博客
03-21 718
超详细uni-app开发---3.tabBar
uniapp 实现不同用户展示不同的tabbar(底部导航栏)
Gblfy_Blog
12-02 2592
uniapp 实现不同用户展示不同的tabbar(底部导航栏)
【uniapp】开发微信小程序自定义底部tabbar
韩旭不会敲代码吧的博客
04-19 9103
uniapp开发微信小程序自定义底部tabbar
uni-app入门（pages.json配置项列表）
guohui的博客
10-09 777
一、tabBar 如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。 注意： 当设置 position 为 top 时，将不会显示 icon tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。 tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式） tabbar 的页面展现过一次
uniapp(tabbar配置)
m0_67388537的博客
07-15 1353
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。同时，HBuilderX 还内置了常用的页面模板（如图文列表、商品列表等），选择这些模板，可以大幅提升你的开发效率。如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
【微信小程序】进阶篇 -- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
JMFive的博客
03-27 4744
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第51篇文章;今天开始学习微信小程序的第35天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
uniapp - 新建页面与tabBar配置
qq_36782325的博客
05-16 1276
目标是创建一个文章模块的页面和底部tab按钮。
uniapp---配置tabbar
zzz1780340的博客
07-25 261
uniapp---配置tabbar
uni-app框架 tabBar（底部导航）创建的方法与外界跳转
01-20
在uni-app中，底部TabBar的配置是通过JSON配置文件实现的，通常位于项目的unpackage/dist/config/app.json或pages.json中。 以下是一个uni-app底部TabBar的基本配置示例： ```json { "tabBar": { "color": "#cd...
uni-app-tabbar:uni-app底部初步实现（不支持小程序）
03-19
- 文件结构：从"uni-app-tabbar-master"这个文件名来看，这是一个包含了源码的项目模板。开发者可以下载这个压缩包，解压后查看源代码，以了解具体的实现细节。 通过以上步骤，开发者可以在uni-app中创建一个功能...
uni-app配置tabbar
实践求真知
09-02 1242
一点睛 当设置 position为top时，将不会显示icon。 tabBar中的list是一个数组，只能配置最少2个，最多5个 tab ，tab按数组的顺序排序。 二代码 1配置pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/message/message"...
uniapp 自定义微信小程序 tabBar 导航栏
最新发布
sinat_35272898的博客
09-03 2393
使用微信小程序 custom-tab-bar 自定义 tabBar 导航栏的主要实现过程
uniapp实现tabBar功能常见的方法
知码客
06-20 1561
如果你需要更复杂的 Tab 功能（例如，带有滑动动画、自定义样式或特殊交互），你可能需要自定义 Tab 视图。这通常涉及到使用组件或其他布局组件来创建标签栏，并结合组件或编程式导航来实现页面切换。data() {return {tabs: [
uniapp之tabbar配置
我心坚持
03-07 566
标签栏不能写‘./’路径，否则报错
uni-app中如何自定义tabBar
summer371的博客
07-25 2358
在你的项目中创建一个自定义tabBar组件
uni-app自定义tabBar
09-07
对于uni-app的自定义tabBar，你可以按照以下步骤进行操作： 1. 首先，在uni-app项目的根目录下的`/pages.json`文件中，找到`tabBar`字段，它是一个数组，用来配置底部导航栏的选项卡。 2. 在`tabBar`数组中的每个对象中，可以设置`iconPath`和`selectedIconPath`字段，分别用于指定未选中和选中状态下的图标路径。 3. 你可以在每个选项卡的对象中添加一个自定义字段，比如`custom`，用来表示是否为自定义选项卡。 4. 在页面文件中，你可以通过监听uni-app框架提供的全局事件`uni.switchTab`来实现自定义选项卡的点击事件。 5. 当用户点击自定义选项卡时，你可以通过调用`uni.switchTab`方法并传入目标页面的路径来实现页面跳转。 6. 在目标页面中，你可以展示自定义的选项卡内容，比如自定义样式、图标等。 需要注意的是，uni-app的自定义tabBar只能在小程序平台上生效，在其他平台上可能无法实现自定义效果。另外，uni-app还提供了一些其他配置选项，如文字颜色、背景颜色等，你可以根据需要进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值