uni-app配置tabBar

原创 已于 2024-04-14 11:51:44 修改 · 1.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #微信小程序

于 2024-04-13 23:18:14 首次发布
这篇文章详细介绍了在uni-app项目中，如何在pages.json文件中配置tabBar，以便在应用中设置首页和分类等页面的跳转和图标显示。
  • 文档

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（十四）
A_nanda的博客
06-28 908
原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用custom-tab-bar组件来自定义普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。
uni-app配置tabbar
实践求真知
09-02 1438
一点睛 当设置 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
热门推荐
韩旭不会敲代码吧的博客
04-19 1万+
uniapp开发微信小程序自定义底部tabbar
uniapp - 新建页面与tabBar配置
qq_36782325的博客
05-16 2589
目标是创建一个文章模块的页面和底部tab按钮。
Uni-App 实现多身份动态切换 TabBar 指南
最新发布
csdn_silent的博客
10-08 1625
在 Uni-App 中实现多身份动态切换 TabBar，能显著提升小程序的个性化与专业度。不同用户角色（如管理员、普通用户、访客）可展示不同的底部导航栏，提升用户体验。本文介绍三种主流实现方式，并重点详解完全自定义 TabBar 组件方案，帮助你根据项目需求选择最合适的技术路径。pages.json启用自定义 TabBar，并配置所有 Tab 页面路径（即使隐藏原生 TabBar，也需声明路径以支持switchTab"list": [},},},"pages": [// 其他页面路径...
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入门（pages.json配置项列表）
guohui的博客
10-09 895
一、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 1558
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。同时，HBuilderX 还内置了常用的页面模板（如图文列表、商品列表等），选择这些模板，可以大幅提升你的开发效率。如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
精选资源
uni-app-tabbar:uni-app底部初步实现（不支持小程序）
03-19
- 文件结构：从"uni-app-tabbar-master"这个文件名来看，这是一个包含了源码的项目模板。开发者可以下载这个压缩包，解压后查看源代码，以了解具体的实现细节。 通过以上步骤，开发者可以在uni-app中创建一个功能...
精选资源
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
weixin_43704586的博客
05-08 946
import tabbar from '@/components/tabbar/tabbar' //引用组件中的tabbartabbar //引用组件中的tabbar},data() {return {},uni.hideTabBar() //隐藏掉原生tabbar组件},methods: {
uni-app中的tabBar配置
Acapplella的博客
08-04 1317
配置tabbar 如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。 Tips 当设置 position 为 top 时，将不会显示 icon tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。 属性说明： 属性 类型 必填 默认值 描述 平台差异说明 c...
微信小程序（uniapp）自定义 TabBar
Rocky_Time的博客
04-23 7385
隐藏原生 TabBar在pages.json文件中，将tabBar配置项设置为空或移除，从而隐藏原生 TabBar。创建自定义 TabBar 组件在项目中创建一个全局组件，用于渲染自定义的 TabBar。动态切换页面内容使用或方法切换页面，同时控制 TabBar 的选中状态。全局管理 TabBar 状态通过 Vuex 或全局变量管理当前选中的 TabBar 项，确保状态同步。
uniapp---配置tabbar
zzz1780340的博客
07-25 474
uniapp---配置tabbar
uni-app - - - - - 自定义tabbar
Dark_programmer的博客
08-27 2917
uni-app - - - - - 自定义tabbar
uni-app中如何配置tabbar效果
jnfy的博客
10-17 1165
uni-app中如何配置tabbar效果
【微信小程序】进阶篇 -- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
JMFive的博客
03-27 5104
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第51篇文章;今天开始学习微信小程序的第35天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
uniapp 自定义微信小程序 tabBar 导航栏
sinat_35272898的博客
09-03 7851
使用微信小程序 custom-tab-bar 自定义 tabBar 导航栏的主要实现过程
微信小程序-项目案例 （二）配置 tabBar
lume博客
12-03 1672
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。Tip： 当设置 position 为 top 时，将不会显示 icon tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。 属性说明： 其中 list 接受一个数组，数
uni-app动态tabBar怎么配置
07-24
在 uni-app 中，动态配置 `tabBar` 的实现方法主要依赖于运行时对 `tabBar` 配置项的修改，并通过 `uni.setTabBarItem` 和 `uni.showTabBar` / `uni.hideTabBar` 等 API 来实现动态更新。虽然原生 `tabBar` 在初始化时依赖 `pages.json` 的静态配置，但通过调用小程序平台提供的 API，仍然可以实现一定程度的动态化管理。 ### 动态修改 tabBar 的实现方式 1. **运行时修改 tabBarItem 的内容** 可以使用 `uni.setTabBarItem` 接口来动态修改某个 tabBarItem 的文本、图标等属性。例如： ```javascript uni.setTabBarItem({ index: 0, // tab 的索引 text: '新首页', // 修改后的文本 iconPath: 'static/new-icon.png', // 修改后的图标路径 selectedIconPath: 'static/new-icon-active.png' // 修改后的选中图标路径 }); ``` 2. **动态显示或隐藏 tabBar** 使用 `uni.showTabBar()` 和 `uni.hideTabBar()` 接口可以在运行时控制 tabBar 的显示与隐藏。 ```javascript uni.hideTabBar(); // 隐藏 tabBar uni.showTabBar(); // 显示 tabBar ``` 3. **动态切换 tabBar 页面** 可以通过 `uni.switchTab` 跳转到指定的 tabBar 页面，该页面必须已在 `pages.json` 中注册为 tabBar 页面。 ```javascript uni.switchTab({ url: '/pages/home/home' }); ``` 4. **自定义 tabBar 的动态实现** 如果需要完全自定义的动态 tabBar（例如根据用户权限显示不同 tab），建议使用自定义组件代替原生 tabBar。可以在页面中自行实现 tabBar 的 UI 和逻辑，并通过页面跳转控制 tab 的切换[^1]。 ### 动态配置的注意事项 - `pages.json` 中的 `tabBar` 配置是静态的，无法在运行时直接修改整个 `tabBar` 的结构。因此，动态配置仅限于修改已有 tabBarItem 的内容或控制显示状态。 - `tabBar` 页面在首次加载时会保留在内存中，后续切换只会触发 `onShow` 生命周期，不会再次执行 `onLoad`。 - 在 App 和微信小程序等平台，原生 `tabBar` 的性能更优，因为它们由原生引擎直接渲染，不依赖 JS 引擎[^2]。 - 如果需要实现顶部 tabbar，建议使用自定义组件而不是原生配置，因为目前顶部 tabbar 仅在微信小程序支持。 ### 示例代码：动态修改 tabBarItem 文本和图标 ```vue <template> <view> <button @click="updateTabBar">更新 TabBar</button> </view> </template> <script> export default { methods: { updateTabBar() { uni.setTabBarItem({ index: 0, text: '动态首页', iconPath: 'static/dynamic-home.png', selectedIconPath: 'static/dynamic-home-active.png' }); } } }; </script> ``` ### 示例配置：pages.json 中的静态 tabBar 配置 ```json { "tabBar": { "list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "static/icons8-首页-24.png", "selectedIconPath": "static/icons8-首页-24 (1).png" }, { "pagePath": "pages/classify/classify", "text": "分类", "iconPath": "static/icons8-分类-32.png", "selectedIconPath": "static/icons8-分类-32 (1).png" } ], "selectedColor": "#fb6e03" } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值