明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
随笔 - 1275, 文章 - 0, 评论 - 214, 阅读 - 320万
  博客园  :: 首页  :: 管理
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

uniapp中uni.navigateBack返回后刷新页面数据的实现

Posted on   且行且思  阅读(3562)  评论(0编辑  收藏  举报

一、前言

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

1.1、uni.navigateBack

 

二、方法

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或者先置空数据再赋值数据,大概率是数据没有响应

相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2023-07-18 jpa HQL查询视图与在数据库中sql查询结果不一致的原因及解决方法记录
2016-07-18 C#:调用webservice时提示对操作的回复消息正文进行反序列化时出错
点击右上角即可分享
微信分享提示