uniapp返回上一页执行上一页方法解决方案
作者：BUG_Jia
这篇文章主要给大家介绍了关于uniapp返回上一页执行上一页方法解决方案,在UniApp中可以通过uni.navigateBack()方法返回上一个页面,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
引言
在使用uniapp的过程中，我相信，我们都一定遇见过如下的场景：
进入了一个列表页，列表页进入详情页，在详情页进行了一些操作，比如，删除，修改，编辑，提交，成功之后返回到列表页，那么这个时候，如果我们的列表页不进行数据的刷新，就会给用户一种错觉，我刚才进行操作的那条数据会不会没成功，我们下拉刷新下列表，这个数据就变成最新的了，这个是很常见的一个交互场景，那么如何不让用户进行下拉刷新或者重新进入列表页的操作，我提供几种比较常用的做法！
解决方案
uniapp.小程序监听左上角的返回按钮，刷新上一个页面的数据
方法一
需要注意的一点是，需要在页面卸载的周期内，把自定义的事件off掉
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返回上一页执行上一页方法解决方案的文章就介绍到这了,更多相关uniapp返回上一页执行上一页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！