UniApp返回上一页执行方法的几种解决方案
作者:百宝袋时间:2026-10-30 23:11:48浏览:503
本文介绍在UniApp开发中,从详情页返回列表页时如何自动刷新数据。提供三种方案:利用uni.$emit/off全局事件、通过getCurrentPages修改上一页数据、以及返回前清空数据重新请求。重点强调事件监听的清理机制,避免重复请求。
引言
在UniApp开发实践中,开发者常遇到以下场景:
用户从列表页进入详情页,在详情页执行删除、修改、编辑或提交等操作后返回。若列表页未自动刷新,用户会疑惑操作是否成功,需手动下拉刷新或重新进入列表页才能看到最新数据。这是常见的交互痛点,本文提供几种常用解决方案,避免用户手动刷新。
解决方案
在UniApp小程序环境中,监听左上角返回按钮并刷新上一页数据。
方法一
需注意,必须在页面卸载周期内移除自定义事件监听。
B页面
onUnload(){
uni.$emit("getlist",{})//这里可以传个空,也可以传值过去
uni.navigateBack({ // 返回上一页
delta: 1
})
}
A页面
onShow(){
uni.$on("getlist", (e)=>{
this.getwrongtllist();//需要重新访问一下接口。
})
},
// 用这种方法需要清除,负责会一直调用多次接口
onUnload() {
// 清除监听
uni.$off('getlist');
},
// 或者有组件的使用不了小程序的生命周期可以使用 beforedestroy方法二
B页面
onUnload(){
var pages = getCurrentPages(); //当前页面栈
if (pages.length > 1) {
var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
beforePage.data.refreshIfNeeded = true;
}
}
A页面
export default {
data() {
return {
refreshIfNeeded: false,
}
}
}
onShow() {
var pages = getCurrentPages(); // 获取当前页面栈
var currentPage = pages[pages.length - 1]; // 当前页面
if (currentPage.data.refreshIfNeeded) {
currentPage.data.refreshIfNeeded = false;
this.mescroll.resetUpScroll(); // 调用列表重置刷新页面
this.mescroll.scrollTo(0,0); // 滚动页面置顶
}
}方法三
B页面 返回
payData.success = (res) => {
uni.showToast({
title: '支付成功',
success: () => {
setTimeout(() => {
uni.navigateBack();
}, 2000)
}
})
}
A页面 返回的时候可以先清空数据,然后再请求一次接口
onShow() {
this.orderList = []
this.currentPage = 1
this.gettradelist()
}总结
- 第一种方法务必在离开页面时清除定义的事件,否则会导致接口被多次请求。
- 第二种方法较为推荐。
- 当前两种方法均不可用时,可使用第三种方法,但一般不推荐。
至此,关于UniApp返回上一页执行上一页方法的解决方案介绍完毕。如需了解更多相关内容,请搜索本站历史文章或继续浏览后续文章,感谢支持!
作者最新文章
定制 Quill.js 主题样式:修改默认 CSS 与添加自定义类名
2026-11-04 11:21:35
混淆JS代码怎么在线反混淆并格式化阅读
2026-11-03 21:46:39
JS在线编辑器代码报错怎么调试?控制台使用技巧
2026-11-03 21:24:56
从 marked.js 旧版本升级到最新版:API 变更与迁移指南
2026-11-03 17:38:17
JS富文本编辑器Quill与代码编辑器CodeMirror的区别及应用场景
2026-11-03 16:52:09
