uni-app配置tabBar

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 文档

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 729
原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用custom-tab-bar组件来自定义普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。
uni-app配置tabbar
实践求真知
09-02 1357
一点睛 当设置 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配置
qq_36782325的博客
05-16 2311
目标是创建一个文章模块的页面和底部tab按钮。
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...
uniapp开发09-设置一个tabbar底部导航栏且配置icon图标
最新发布
yrldjsbk的博客
05-06 857
在实际项目开发中，经常会遇到需要设置icon图标的情况，而且底部导航通常都是有固定位置且内容不会轻易发生变化的。官方提供了自带的tabbar组件。声明：默认情况下，navigator这种 跳转页面的情况是仅仅是跳转到非Tabbar页面！也就是说，你想跳转到这种一级入口页面的话，需要设置参数：open-type:reLaunch；在双引号内输入简单的单词开头几个字母，环境就会自动帮你提示！而且我是配置了一个简单的颜色切换icon图标配图的。只有带着这个参数值，才能实现正常的跳转到tabbar页面去！
uni-app入门（pages.json配置项列表）
guohui的博客
10-09 858
一、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 1490
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。同时，HBuilderX 还内置了常用的页面模板（如图文列表、商品列表等），选择这些模板，可以大幅提升你的开发效率。如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
【微信小程序】进阶篇 -- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
JMFive的博客
03-27 5028
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第51篇文章;今天开始学习微信小程序的第35天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
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 836
import tabbar from '@/components/tabbar/tabbar' //引用组件中的tabbartabbar //引用组件中的tabbar},data() {return {},uni.hideTabBar() //隐藏掉原生tabbar组件},methods: {
【uniapp】开发微信小程序自定义底部tabbar
热门推荐
韩旭不会敲代码吧的博客
04-19 1万+
uniapp开发微信小程序自定义底部tabbar
uniapp---配置tabbar
zzz1780340的博客
07-25 445
uniapp---配置tabbar
uni-app - - - - - 自定义tabbar
Dark_programmer的博客
08-27 2748
uni-app - - - - - 自定义tabbar
uni-app中如何配置tabbar效果
jnfy的博客
10-17 1091
uni-app中如何配置tabbar效果
uniapp 自定义微信小程序 tabBar 导航栏
sinat_35272898的博客
09-03 6929
使用微信小程序 custom-tab-bar 自定义 tabBar 导航栏的主要实现过程
uniapp实现tabBar功能常见的方法
知码客
06-20 2869
如果你需要更复杂的 Tab 功能（例如，带有滑动动画、自定义样式或特殊交互），你可能需要自定义 Tab 视图。这通常涉及到使用组件或其他布局组件来创建标签栏，并结合组件或编程式导航来实现页面切换。data() {return {tabs: [
uni-app中如何自定义tabBar
summer371的博客
07-25 4180
在你的项目中创建一个自定义tabBar组件
微信小程序（uniapp）自定义 TabBar
Rocky_Time的博客
04-23 4394
隐藏原生 TabBar在pages.json文件中，将tabBar配置项设置为空或移除，从而隐藏原生 TabBar。创建自定义 TabBar 组件在项目中创建一个全局组件，用于渲染自定义的 TabBar。动态切换页面内容使用或方法切换页面，同时控制 TabBar 的选中状态。全局管理 TabBar 状态通过 Vuex 或全局变量管理当前选中的 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、付费专栏及课程。

余额充值