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 727
原生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_63026743的博客
12-11 6265
一套小程序及app可能会有多个用户角色，多者能看到的内容应该是不一样的。实现原理舍弃uniapp原生的tabbar，使用uView插件下的u-tabbar导航插件来实现。介绍 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架uView UI，是 uni-app 生态最优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水根据uView 2.0 安装及配置在uniappApp中配置完善，配置完善后进行动态Tabbar设置。
uniapp - 新建页面与tabBar配置
qq_36782325的博客
05-16 2307
目标是创建一个文章模块的页面和底部tab按钮。
uniapp开发09-设置一个tabbar底部导航栏且配置icon图标
最新发布
yrldjsbk的博客
05-06 832
在实际项目开发中，经常会遇到需要设置icon图标的情况，而且底部导航通常都是有固定位置且内容不会轻易发生变化的。官方提供了自带的tabbar组件。声明：默认情况下，navigator这种 跳转页面的情况是仅仅是跳转到非Tabbar页面！也就是说，你想跳转到这种一级入口页面的话，需要设置参数：open-type:reLaunch；在双引号内输入简单的单词开头几个字母，环境就会自动帮你提示！而且我是配置了一个简单的颜色切换icon图标配图的。只有带着这个参数值，才能实现正常的跳转到tabbar页面去！
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 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 1489
在 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 2746
uni-app - - - - - 自定义tabbar
uni-app中如何配置tabbar效果
jnfy的博客
10-17 1091
uni-app中如何配置tabbar效果
uniapp 自定义微信小程序 tabBar 导航栏
sinat_35272898的博客
09-03 6920
使用微信小程序 custom-tab-bar 自定义 tabBar 导航栏的主要实现过程
uniapp实现tabBar功能常见的方法
知码客
06-20 2865
如果你需要更复杂的 Tab 功能（例如，带有滑动动画、自定义样式或特殊交互），你可能需要自定义 Tab 视图。这通常涉及到使用组件或其他布局组件来创建标签栏，并结合组件或编程式导航来实现页面切换。data() {return {tabs: [
uni-app中如何自定义tabBar
summer371的博客
07-25 4165
在你的项目中创建一个自定义tabBar组件
uni-app tabbar 设置多语言切换
01-17
### uni-app TabBar 多语言切换方法 在uni-app项目中，TabBar的多语言支持可以通过配置`i18n`库并结合动态修改TabBar标签来实现。具体来说，在初始化应用时加载对应的语言包，并监听语言变化事件以便实时更新TabBar的文字。 对于TabBar文字内容，通常是在页面的JSON配置文件里定义。为了使这些静态文本能够响应不同的语言环境，建议采用如下策略： - 将各个语言版本下的字符串存放在独立的对象内； - 使用Vue实例中的computed属性计算当前所选语言对应的Tab名称； - 调用`uni.setTabBarItem()` API函数刷新指定索引处的item显示[^1]； 下面给出一段简单的示例代码用于说明上述过程： ```javascript // main.js 中引入 i18n 配置 import Vue from 'vue'; import App from './App'; import store from './store'; // 假设状态管理中有保存用户的偏好设置 import { locale } from 'vant'; locale.use(store.getters.language); // 初始化默认语言 Vue.config.productionTip = false; new Vue({ render: h => h(App), }).$mount('#app'); // pages/index/index.vue 或者其他包含 tabBar 的页面组件 <template> <!-- 页面模板 --> </template> <script> export default { computed: { tabNames() { const lang = this.$t('tabbar'); // 获取翻译后的tabbar对象 return [ { pagePath: "/pages/home/home", text: lang.home }, { pagePath: "/pages/category/category", text: lang.category }, { pagePath: "/pages/cart/cart", text: lang.cart }, { pagePath: "/pages/user/user", text: lang.user } ]; } }, onLoad(){ this.updateTabs(); }, methods:{ updateTabs(){ let that=this; this.tabNames.forEach((item, index)=>{ uni.setTabBarItem({index:index,text:item.text}); }); } }, watch: { '$i18n.locale'(toLang){ this.updateTabs(); // 当语言改变时重新渲染tabs } } } </script> ``` 此段脚本展示了如何利用Vant UI框架提供的国际化工具以及Vuex存储机制配合完成整个流程的设计思路。每当用户更改了应用程序内的首选项之后，都会触发相应的观察器逻辑去调用API接口从而达到即时生效的目的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值