uni-app 向tabBar 页面传值

最新推荐文章于 2025-03-21 08:00:00 发布
最新推荐文章于 2025-03-21 08:00:00 发布
阅读量3.4k 收藏 4
点赞数 1
分类专栏： uni-app 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qyx189573/article/details/105795530
版权
本文介绍了一种在uniApp中实现跨TabBar页面传值的方法，利用uni.setStorageSync和uni.getStorageSync进行数据存储和读取，替代了不再生效的uni.reLaunch传值方式。

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

如何向tabBar传值 简单方式

// 原来可以使用uni.reLaunch 向tabBar页面传值的，最近发现这个已经不可以了。
//a页面
uni.setStorageSync('sell',0);
// b页面
// 在onshow 或者onload 中取值
uni.getStorageSync('sell');
uniapp 实现tabBar-switchTab之间的传参
weixin_48596030的博客
01-16 3332
（注意一定要放在onShow生命周期里面及时更新数据，因为tabBar会有缓存机制此时再次进入页面onLoad不会执行）官方文档明确说明: 跳转tabBar栏的页面只能使用 uni.switchTab 并且url 路径后面不能传递参数。//user.vue 页（在onShow中从本地缓存中获取出来,进行相关操作）此时this.info.name 就是name.vue页面传递过来的参数。main.js 定义全局变量。//index.vue 页。页面1： name.vue。页面2：index.vue。
uni-app页面之间参数传递（十二）
A_nanda的博客
06-26 708
保留当前页面，跳转到应用内的某个页面，使用。
uniapp 实现tabBar之间传参
weixin_55666391的博客
12-11 4163
官方文档明确说明: 跳转tabBar栏的页面只能使用 uni.switchTab 并且url 路径后面不能传递参数：
Vue3+UniApp：在单个页面实现固定 TabBar 的多种方式
最新发布
码农研究僧的博客
03-21 2305
在 UniApp 开发中，tabBar 通常是通过 pages.json 配置的，适用于整个应用的全局导航。然而，在某些场景下，我们可能需要只在特定的页面展示 tabBar，而不会影响其他页面的布局。这就需要使用 自定义 tabBar，可以通过 view 组件、uni-segmented-control 组件或 uni-nav-bar 组件等方式来实现。
uniapp中实现tabBar栏页面的参数传递
m0_58293192的博客
10-25 6298
uniapp中实现tabBar栏页面的参数传递
关于uni-app中如何给tabber页面传值并获取 绝对好用！！
m0_47703222的博客
09-09 464
关于uni-app中如何给tabber页面传值并获取 绝对好用！！ 在uni-app中，有很多路由跳转的api，在非tabber页面进行路由跳转和传值非常方便，只需在onload中拿去即可，但这些方法都写明：无法在跳转向tabber页面时传递参数，下面是解决办法 getCurrentPages() **getCurrentPages() ** 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。 通过该api获取本页面（也可以是tabber页面）的实例
uni-app系列：页面跳转以及传递参数
2401_84092360的博客
04-13 4124
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
uni-app如何页面传参数的几种方法总结
11-21
在uni-app中，页面间通信是一个常见的需求，特别是在构建复杂应用时。本文主要讨论的是如何通过uni.$emit()和uni.$on()实现这种通信。这两种方法是uni-app提供的一种全局事件总线机制，允许不同页面之间传递数据和...
uni-app 经验分享，从入门到离职（四）——页面栈以及页面跳转的 API（开发经验总结）
热门推荐
黛琳ghz的博客，期待你的关注。
02-21 2万+
这篇文章是本专栏 uni-app 的项目实战篇，主要内容的是页面栈以及页面跳转的 API，页面栈是 uni-app 中一个重要的概念，它用于管理应用程序中的页面层级关系。接下来讲一下如何利用页面栈来实现页面之间的切换和导航，以及如何使用 uni-app 提供的 API 来进行页面跳转等等知识点。
uni-app面试题
admin12345671的博客
04-16 6479
入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pages.json中进行配置。是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";
uni-app的基本使用学习笔记（简记）
m0_66148802的博客
03-10 874
主要讲解学习uni-app的基本使用，详细文档还需要看uni-app官网。
uniapp为tabbar动态赋值
quakeZhang的博客
04-24 3610
uniapp为tabbar动态赋值uniapp为tabbar动态赋值 uniapp为tabbar动态赋值 uni.setTabBarBadge方法设置tabbar text赋值要加‘’+‘’ uni.setTabBarBadge({ index: 2, text: '' + this.total3 + '', }); ...
uniapp如何解决其他页面跳tabBar传参问题
weixin_48862362的博客
09-11 479
1.使用本地存储实现跳tabBar页动态传参给input中的value tabBar页面 <template> <view class="agreement"> <input type="text" :value="number" /> </view> </template> <script> export default { data() { return { number:'' }
在TabBar里面写的页面之间进行传值应该通过onLoad函数
Missbelover的博客
07-03 1418
问题描述 例如下图，在tabBar里面写的页面，是不能通过navigator 进行页面之间的传值的，那么除了navigator 还有别的传值方式吗？ 还有一种别的方式是：通过如下方式： //第一个页面的JS文件 const app=getApp(); // 立即购买 immeBuy() { var _this=this; console.log("go") g...
uniapp组件-uni-notice-bar通告栏
songjuntao8的专栏
06-25 8038
uniapp组件-uni-notice-bar通告栏
uniapp：关于如何解决向tabbar页面传参这件事
本以为成功很简单，没想到活成普通人都需拼尽全力！
04-02 6430
先说这个问题，如何向tabbar页面传递参数，为什么会有这个问题，请看uniapp的文档上是这么写的； 所以像下方写的代码，是完全不生效的！只会跳到tabbar center页面，但是并不能在onLoad中获取到传递的参数 uni.switchTab({ url: '/pages/center/center?id=999' }); 那么如何去向tabbar页面传递参数？ 1. 利用缓存storage <template> <view><button @
8.uniapp实现跳转页面，tabbar页面，对应页面接收参数
m0_56986233的博客
05-07 5388
1.绑定点击事件 <view class="sugg-list" v-if="SearchLists.length !== 0"> <view class="sugg-item" v-for="(item, i) in SearchLists" :key="i" @click="gotoDetail(item.goods_id)"> <view class="goods-name">{{item.goods_name}}&
uniapp：导航跳转+传参
倚树探星的博客
07-12 1919
1、导航式跳转 <navigator></navigator>组件：只能跳转本地页面。目标页面必须在pages.json中注册。 从A页面跳转到B页面，有以下几种情况： 普通页跳转到普通页：open-type="navigate"（默认navigate） 普通页跳转到tabBar页面：open-type="switchTab" tabBar页面跳转到普通页：open-type="navigate" tabBar页面跳转到tabBar页面：open-type="switchTab"
【uni-app】解决tabBar不能传参的问题
loyd3的博客
11-10 851
uni.setStorageSync()方法的第一个参数是属性，第二个参数是值，与H5的localStorage使用方式是一样的。跳转到tabBar页面时是不能传参的但是实际开发中需要在跳转tabBar页面时进行传参，这是可以。, uni-app的本地缓存是。
uni-app实现tabbar间页面跳转
09-27
在uni-app中实现tabbar间的页面跳转，需要先在page中创建好需要跳转的页面，并在tabbar的list属性中设置按钮的个数和对应的页面路径。然后，在点击tabbar按钮时，通过onTabItemTap事件来刷新页面。具体实现代码如下： ``` <template> <view> <!-- 定义tabbar组件 --> <tabbar> <!-- 定义tabbar按钮 --> <tabbar-item v-for="(item, index) in tabbarList" :key="index" :index="index" :icon="item.icon" :text="item.text" ></tabbar-item> </tabbar> <!-- 定义页面内容 --> <view> <!-- 定义跳转的页面 --> <page-a v-if="currentTab === 0" /> <page-b v-if="currentTab === 1" /> <page-c v-if="currentTab === 2" /> </view> </view> </template> <script> export default { data() { return { currentTab: 0, // 当前选中的tab索引 tabbarList: [ { icon: 'home', text: '首页' }, { icon: 'search', text: '搜索' }, { icon: 'person', text: '个人中心' }, ], }; }, methods: { // 点击tabbar按钮切换页面 onTabItemTap(index) { this.currentTab = index; }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值