当前位置:网站首页>微信小程序wx.navigateBack返回上一页携带参数
微信小程序wx.navigateBack返回上一页携带参数
2022-06-29 08:26:00 【swag_特约男演员】
需求
从 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生命周期
鸣谢
边栏推荐
- ActiveMQ message component publish subscribe redelivery message redelivery
- laravel 8 实现 订单表按月份水平分表
- Measure the level of various chess playing activities through ELO mechanism
- Let you know today that the passing rate of the PMP Exam is 97%, is it believable
- 闭关修炼(二十)如何做好单元测试
- 闭关修炼(二十四)浅入了解跨域问题
- 二手交易平台碳减排,有了评估标准
- 手写VirtualDOM
- P6776-[NOI2020]超现实树
- Oracle subquery
猜你喜欢

Uber前安全主管面临欺诈指控 曾隐瞒数据泄露事件

Calculus Learning

H5软键盘问题

【最全】PS各个版本下载安装及小试牛刀教程(PhotoShop CS3 ~~ PhotoShop 2022)

npm常用命令

The final of the sixth season of 2022 perfect children's model Hefei division came to a successful conclusion

Activemq消息组件发布订阅ReDelivery消息重新投递

General multiplier design, verilog code
![[most complete] download and installation of various versions of PS and tutorial of small test ox knife (Photoshop CS3 ~ ~ Photoshop 2022)](/img/6d/4d8d90dd221de697f4c2ab5dcc7f96.png)
[most complete] download and installation of various versions of PS and tutorial of small test ox knife (Photoshop CS3 ~ ~ Photoshop 2022)

ActiveMQ message component publish subscribe redelivery message redelivery
随机推荐
sql server 用 administrator 权限运行吗?还是以普通用户运行呢?
uni-app获取当前页面路由url
Uber前安全主管面临欺诈指控 曾隐瞒数据泄露事件
Pointnet的网络学习
Development tips - Image Resource Management
闭关修炼(二十五)基础web安全
Typescript variable declaration - type assertion
背包九讲——全篇详细理解与代码实现
Verilog size and +: Using
Working for many years, recalling life -- three years in high school
verilog 等价操作符
ThinkPHP 6 使用 mongoDB
The final of the sixth season of 2022 perfect children's model Hefei division came to a successful conclusion
2022 spring summer collection koreano essential reshapes the vitality of fashion
C# 语音端点检测(VAD)实现过程分析
Self attention mechanism
Multiplier design (pipeline) Verilog code
Chengtong network disk imitation blue playing network disk source code with video tutorial
Leetcode (142) - circular linked list II
递归方法 rbac菜单层级显示 无限极分类