uniapp：返回上页刷新的方式，常用于详情返回列表

问题描述：

在使用uniapp开发的过程中，我相信，我们都一定遇见过如下的场景：

进入了一个列表页，列表页进入详情页，在详情页进行了一些操作，比如，删除，修改，编辑，提交，成功之后返回到列表页，那么这个时候，如果我们的列表页不进行数据的刷新，就会给用户一种错觉，我刚才进行操作的那条数据会不会没成功，我们下拉刷新下列表，这个数据就变成最新的了，这个是很常见的一个交互场景，那么如何不让用户进行下拉刷新或者重新进入列表页的操作，我提供几种比较常用的做法！

---

解决方案

uni-app小程序监听左上角的返回按钮，刷新上一个页面的数据

第一种方法：

需要注意的一点是，需要在页面卸载的周期内，把自定义的事件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()
}

---

总结：

• 第一种方法一定要在离开页面的时候清除掉定义的事件否则会请求接口多次
• 第二种方法也是比较推荐的一种
• 第三种方法是前二种都不能用的情况下使用，不是很推荐使用