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

 

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

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

代码如下:

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

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

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

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

 这样问题就解决了。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
以下是一个简单的 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、付费专栏及课程。

余额充值