微信小程序wx.navigateBack返回上一页携带参数

最新推荐文章于 2024-07-10 10:31:52 发布

原创最新推荐文章于 2024-07-10 10:31:52 发布 · 1.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript

微信小程序返回传递参数同时被 2 个专栏收录

1 篇文章

订阅专栏

wx.navigateBack

1 篇文章

订阅专栏

本文探讨了微信小程序中列表页与新增页之间的交互问题，特别是如何在新增数据后返回列表页并保持正确的滚动位置，避免数据重复加载。通过在特定生命周期中调用刷新方法，并利用getCurrentPages()获取页面栈来传递刷新信号。

需求

从 A页(列表页) 到 B页 (新增表单页) 进行新增，当B页完成新增点击返回A页(列表页) 进行刷新。

注意

如果B页使用wx.navigateTo，重新跳转回A页,理论上也是可以拿到参数什么之类的，但是使用微信小程序自带的返回按钮会出现路由紊乱，就是一直返回这几个页面。
为什么不把获取列表方法getList()放在onShow生命周期中呢？这样无论什么方式进入页面都会刷新。这会有个问题。分页列表你一直滑，滑到下面某一处列表点击查看详情（假设当前pageNo: 5, pageSize: 10）， 从详情页返回列表页会进行刷新 ，如果是pageNo : 1, pageSize: 10重新刷新无法记录滚动位置，又得重新往下滑，很明显不太对劲。如果是pageNo: 5, pageSize: 10再请求一次会变得有重复数据。因为本来当前pageNo: 5的时候已经concat数据了，当从详情页返回触发onShow生命周期里的getList()，原来的查询参数还是pageNo: 5, pageSize: 10相当于又concat了一次，变得重复。
应该把获取列表方法写到onReady生命周期中，这样既可以记录原来滚动位置，也不会频繁调动接口，只有新增，或者删除，列表才要进行刷新操作

实现

在新增页调用接口新增成功后

var pages = getCurrentPages()
var prevPage = pages[pages.length - 2] //上一个页面
//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
  isAddBack: true
})
wx.navigateBack({
  delta: 1
})

前提是需要在列表页有这个参数，所以要在列表页的data加上去
在这里插入图片描述
在列表页onShow生命周期可以进行接收

	if (this.isAddBack) {
      this.onRefresh() // 刷新方法（pageNo： 1， pageSize: 10）
      this.setData({
        isAddBack: false
      })
    }

这里的意思就是每当列表页进入onShow这个生命周期就要进行判断页面是否是从新增页进行返回的，如果是就刷新列表，刷新完重置标志位，其它方式触发onShow将不会刷新列表
还有 另一种接收方法

var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
let param = currPage.data.isAddBack;
console.log(param)//为传过来的值

照猫画虎即可。

要点

getCurrentPages()这个函数获取页面栈
onShow生命周期中获取参数，因为返回只能触发onShow生命周期

鸣谢

大佬思路