uniapp微信小程序 页面跳转传参（uni.switchTab传参无法获取,uni.reLaunch传参可以获取）

最新推荐文章于 2024-05-30 18:02:59 发布
最新推荐文章于 2024-05-30 18:02:59 发布
阅读量1.7k 收藏 1
点赞数 1
文章标签： 微信小程序 uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69344090/article/details/130103233
版权

 

uni.switchTab跳转tab页面无法传递参数

因为是tab页面，我首先想到的就是通过：uni.switchTab进行页面跳转。

代码如下:

然后在首页的onShow生命周期函数中进行监听路由参数。
代码如下：

结果uni.switchTab跳转的页面是不能够将路由参数传递到页面中的。 

uni.reLaunch跳转tab页面可以实现传参

这样就可以拿到路由中的参数了。

 这样问题就解决了。

小程序小马哥
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
uni-app 实现小程序 仿微信 我的界面
03-30
uni-app支持页面路由管理，你可以定义好各个页面的路径，并在需要跳转的地方使用uni.navigateTo或uni.switchTab等API进行页面间的跳转。 7. 适配不同平台 uni-app的一大优势是跨平台，你需要根据不同的目标平台（如...
微信小程序跨页面传参，事件订阅和分发的Demo，使用JavaScript 库onfire.js实现。
03-16
在微信小程序的开发过程中，跨页面传参以及事件订阅与分发是两个重要的技术点。本Demo利用JavaScript库onfire.js来解决这些问题，让我们深入探讨一下。 1. **跨页面传参**：在传统的网页开发中，我们可以通过URL...
uniapp中 uni.switchTab跳转params怎么传递参数
weixin_35751412的博客
01-13 5263
在 uni-app 中，可以使用 uni.switchTab(OBJECT) 方法来切换到指定的 tab 页面，其中 OBJECT 参数中可以包含 url 和 params 两个属性，用于指定要跳转的页面路径和传递的参数。 示例: uni.switchTab({ url: '/pages/index/index', params: { name: '参数名', ...
uni.navigateTo和uni.switchTab的区别
Amouzy的博客
02-25 3651
两者最大区别： uni.switchTab跳转的必须是TabBar上的路径； uni.navigateTo跳转非TabBar上的路径 相同之处： 皆为uniapp跳转页面的api 详细： （1）uni.navigateTo: 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 示例： //在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url: '/pages/test/test?id=1&name=uniapp'
uniapp uni.switchTab跳转不能传参的问题
最新发布
AKahong的博客
05-30 383
uniapp uni.switchTab跳转不能传值
uni-app——uniapp 中 uni.switchTab 跳转 tabbar 页面无法传参
qq_43201350的博客
02-28 662
uni-app——uniapp 中 uni.switchTab 跳转 tabbar 页面无法传参
解决uniapp中uni.switchTab无法传参
...
10-02 9249
解决uniapp中uni.switchTab无法传参
【uniapp】uni.switchTab跳转不支持传参，getApp().globalData代替传参
weixin_47078502的博客
03-22 1031
uni.switchTab跳转不支持传参，getApp().globalData代替传参
关于微信小程序wx.switchTab的问题
03-29
wx.switchTab({ url: '../category/category?cate_id='+cate_id, }); }, 按照上面写的在category.js里得不到数据;   onLoad:function(options){ console.log(options); } 然后查看了下官方文档. wx.switc
微信小程序源码-茶叶商城.zip
03-07
微信小程序通过navigator组件实现页面间的跳转，配合wx.navigateTo、wx.redirectTo、wx.switchTab等API控制导航行为。茶叶商城会涉及商品详情页、购物车页、订单页之间的跳转。 7. 自定义组件： 为了提高代码复用...
微信小程序-cnode社区版.zip
04-13
开发者可以使用`wx.navigateTo`、`wx.reLaunch`、`wx.switchTab`等方法实现不同页面间的导航。 8. cnode社区接口集成： "微信小程序-cnode社区版"很可能与cnode社区的API进行了集成，通过发送HTTP请求获取社区的...
uniapp 实现tabBar-switchTab之间的传参
weixin_48596030的博客
01-16 2455
（注意一定要放在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。
小程序（uniapp）页面的跳转方式有哪些，他们之间的区别是什么？
生命不息，挖坑不止
07-01 4072
uni.navigateTo 会将新页面压入页面栈，而 uni.redirectTo 则不会打开新的页面，而 switchTab 和 reLaunch 、uni.navigateBack 则会从页面栈中弹出当前页面，返回到上一页面或多级页面。保留当前页面，跳转到应用的某个页面，使用 uni.navigateBack 可以返回原页面。1、页面栈最大深度为10，当超过10时，需要使用 uni.redirectTo 或 uni.reLaunch。关闭当前页面，跳转大应用内的某个页面。这种方式类似于网页的重定向。
uniapp switchTab刷新
REal_201903的博客
08-03 1492
直接通过uni.switchTab跳转页面不刷新。
微信小程序switchTab传参以及接收参数
热门推荐
Ghjkku的博客
07-23 13万+
我们可以在switch跳转之前设置一个全局变量，到下一个页面的时候，直接去获取全局变量。index.js保存参数先。contact.js获取参数。这样的传参方式是不行的。
【边做边学】uni.switchTab的目标页面获取不到url携的参数
tutututu12345678的博客
01-26 665
并不直接支持传递参数，而且 TabBar 页面在切换时可能无法正常获取到传递的参数。这种方法通过全局存储数据的方式，可以在目标页面加载时获取到传递的参数。一个常见的解决方案是使用全局状态管理（比如Vuex）或者小程序的全局数据（时，如果需要，可以在目标页面加载后清除已经使用过的参数。这样的方式，携带参数的情况会遇到一些问题。）来在跳转前存储数据，然后在目标页面的。切换到的页面，如果使用了类似于。生命周期中获取这些数据。
uniapp切换页面时报错问题
m0_60936523的博客
12-05 1745
该错误的意思是不能切换到 tabbar 页面。tabbar页面通常是公共页面或者底部导航栏，如果我们用 navigateTo 或者 redirectTo 都不能实现页面切换。第一种是用 switchTab 来进行切换，但注意切换后并不能刷新页面，如果两个页面存在数据交互，在页面切换后需要手动刷新页面才能显示出数据。第二种是用 reLaunch 来切换页面，reLaunch切换时会关闭当且页面，刷新新的页面，存在数据交互也能顺利进行。若需要进行tabbar的页面切换时，建议采用 reLaunch 的方式。
uni-app uni.switchTab和uni.reLaunch跳转tabbar页面
maoge_666的博客
06-25 2331
uni-app uni.switchTab和uni.reLaunch跳转tabbar页面
uniapp 如何自定义底部TabBar 且还能使用 uni.switchTab
m0_65629667的博客
05-18 1757
在pages.json文件下 tabBar选项下有个 height配置项设置为0，这个时候uniapp自带的tabBar已经不会在显示了，当是你还是得需要吧你自定义tabBar所需的页面放进来。在你的项目下面创建一个components文件夹专门放你的自定义组件，然后在新建一个TabBar文件，这里的样式文件可以按照自己的喜好使用scss、less、css文件。在main.js / main.ts文件下 把写好的TabBar组件注册到全局中。这个是index.scss文件下的代码。直接废话不多说上代码。
uniapp微信小程序分页请求后端案例
05-04
以下是一个简单的 uniapp 微信小程序分页请求后端的案例： 1. 在 uniapp 中创建一个页面，命名为 ListPage.vue。 2. 在 ListPage.vue 中，添加一个列表组件，例如： ``` <template> <view> <list :list="dataList"></list> <loadmore :loading="loading" :finished="finished" @load="loadData"></loadmore> </view> </template> <script> import List from '@/components/List.vue' import LoadMore from '@/components/LoadMore.vue' export default { components: { List, LoadMore, }, data() { return { dataList: [], loading: false, finished: false, currentPage: 1, pageSize: 10, } }, methods: { async loadData() { if (this.loading || this.finished) return this.loading = true const res = await uni.request({ url: '/api/getDataList', data: { page: this.currentPage, size: this.pageSize, }, }) if (res.statusCode === 200) { const dataList = res.data.dataList const total = res.data.total this.dataList = this.dataList.concat(dataList) if (this.dataList.length >= total) { this.finished = true } else { this.currentPage++ } } this.loading = false }, }, } </script> ``` 3. 在 ListPage.vue 中，添加一个接口请求方法，例如： ``` async getDataList(page, size) { const res = await uni.request({ url: '/api/getDataList', data: { page: page, size: size, }, }) if (res.statusCode === 200) { return res.data } else { throw new Error('Network Error') } }, ``` 4. 在后端服务器中，添加一个路由处理程序，例如： ``` router.get('/api/getDataList', async (req, res) => { const page = parseInt(req.query.page) || 1 const size = parseInt(req.query.size) || 10 const startIndex = (page - 1) * size const endIndex = startIndex + size try { const dataList = await getDataListFromDatabase(startIndex, endIndex) const total = await getTotalFromDatabase() res.json({ dataList: dataList, total: total, }) } catch (error) { res.status(500).send(error.message) } }) ``` 5. 在后端服务器中，添加一个数据查询方法，例如： ``` async function getDataListFromDatabase(startIndex, endIndex) { const result = await db.query(` SELECT * FROM data_table ORDER BY id DESC LIMIT ${startIndex}, ${endIndex} `) return result.rows } ``` 6. 在后端服务器中，添加一个数据统计方法，例如： ``` async function getTotalFromDatabase() { const result = await db.query(` SELECT COUNT(*) FROM data_table `) return result.rows[0].count } ``` 7. 运行后端服务器和微信小程序，即可在 ListPage 页面上看到分页列表和加载更多按钮。 注意：以上代码仅供参考，实际项目中需要根据具体需求进行修改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小程序小马哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值