一、前言

在移动端中，数据列表中某项数据点击编辑，进入下一个页面编辑数据，保存后回退到数据列表页，此时需要刷新列表数据，否则显示的列表数据还是旧的。这种场景感觉很多地方都有出现，是需要详细说说方法，也就是uniapp中uni.navigateBack返回后刷新页面数据。

1.1、uni.navigateBack

示例：

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
	delta: 2
});

二、方法

2.1、父页面设置钩子函数onBackPress

详细文档可点击【跳转】，适用于刷新多处数据

export default {
    onBackPress(options) {
        this.refreshData();
    },
    methods:{
        refreshData: function() {
            //加载数据
        }
    }
}

2.2、uni.$emit和uni.$on监听通知数据变更(个人推荐)

2.2.1、子页面

子页面在需要返回上一页面的地方写入uni.navigateBack，然后在success回调中uni.$emit发送数据更新通知

uni.navigateBack({
    delta: 1, // 返回层数，2则上上页
    success() {
        uni.$emit('update',{msg:'页面更新'})
    }
})

2.2.2、父页面

父页面在初始化时uni.$on监听数据更新，在回调函数中处理数据。在页面销毁时移除监听

export default {
    mounted() {
        uni.$on('update', function(data) {
            //触发更新后
        })
    },
    //为了优化代码，可以加上移除事件，避免重复监听事件
    onUnload() {
        // 移除监听事件  
        uni.$off('update');
    }
}

2.3、onShow钩子函数处理数据

2.3.1、子页面

准备回退到上一页之前，将上一页的是否刷新参数值改为是的状态

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; // 上一个页面
// 直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
    isRefresh: 1 
})
// 再根据需求，确定返回上一页面
uni.navigateBack({
    delta: 1
})

2.3.2、父页面

在onShow钩子函数中获取判断条件

export default{
    data() {
        return{
            isRefresh:false
        }
    },
    onShow() {  
        // 如果是提交状态返回isRefresh=1，才刷新页面，从详情过来无需刷新
        let pages = getCurrentPages();
        let currPage = pages[pages.length - 1];
        if(currPage.__data__.isRefresh) {
            // 重新获取数据
            this.getData(true)//获取列表数据
            // 每一次需要清除，否则会参数会缓存
            currPage.__data__.isRefresh=false
        }
    }
}

2.4、注意

如果出现数据没有更新，可以使用$forceUpdate或者先置空数据再赋值数据，大概率是数据没有响应

---

标题：uniapp中uni.navigateBack返回后刷新页面数据的实现
作者：jerrycookie
地址：https://www.mmzsblog.cn/articles/2025/01/20/1737364177485.html

如未加特殊说明，文章均为原创，转载必须注明出处。均采用CC BY-SA 4.0 协议！

本网站发布的内容（图片、视频和文字）以原创、转载和分享网络内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。若本站转载文章遗漏了原文链接，请及时告知，我们将做删除处理！文章观点不代表本网站立场，如需处理请联系首页客服。
• 网站转载须在文章起始位置标注作者及原文连接，否则保留追究法律责任的权利。
• 公众号转载请联系网站首页的微信号申请白名单！

---

个人微信公众号 ↓↓↓