uniapp返回上一页执行上一页方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp返回上一页执行上一页方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在使用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()
}

总结