首页 > 其他分享 >uniapp中uni.navigateBack返回后刷新页面数据的实现

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

时间:2024-07-18 16:53:02浏览次数:13  
标签:uniapp navigateBack 刷新 uni 数据 pages 页面

一、前言

在移动端中,数据列表中某项数据点击编辑,进入下一个页面编辑数据,保存后回退到数据列表页,此时需要刷新列表数据,否则显示的列表数据还是旧的。这种场景感觉很多地方都有出现,是需要详细说说方法,也就是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或者先置空数据再赋值数据,大概率是数据没有响应

标签:uniapp,navigateBack,刷新,uni,数据,pages,页面
From: https://www.cnblogs.com/Fooo/p/18309958

相关文章

  • uni-app的checkbox组件有些情况下视图层不更新解决方案
    应用场景问题:在使用uniapp的复选框组件checkbox实现列表的全选跟不全选功能时发现,列表的checkbox视图层在某些情况下不生效    解决方法 解决方案1:利用  this.$set改变数据,即 this.$set(item,'checked',false),这个时候视图层跟数据都一起更新了,但是在上面那种......
  • VS快速全局查找Unity死循环代码
    1、编写一个死循环方法,然后运行调试vsusingUnityEngine;publicclassDeadLoop:MonoBehaviour{//StartiscalledbeforethefirstframeupdatevoidStart(){DeadLoopMethod();}voidDeadLoopMethod(){while(t......
  • 联合体union详解
    前言    本章我们来了解C语言中的联合体,它的基本基本使用,内存计算,大小端判断应用与结构体struct的区别等知识点。什么是联合体union(联合体)是C语言(及其衍生语言如C++)中一种特殊的数据类型,它允许在相同的内存位置存储不同的数据类型。union的主要特点是其所有成员共享......
  • uniapp [全端兼容] - 详细实现接入使用海康威视监控云端显示及控制功能,网站集成安装海
    前言如果需要Vue版本,请访问这篇文章。在uni-app全平台兼容(H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue)项目开发中,详解免费安装使用“海康威视监控摄像头”在网页中对接设备并进行实时显示监控画面及各种功能操作控制教程,对接海康视频监控播放及回放......
  • uni-app请求数据,在tab切换时,取消未完成的接口请求abort
    1、在实现tab页功能切换时,如果是tab标签下显示的内容不一样时,要注意快速切换tab标签时,接口数据还没有请求回来时,切到另外tab导致数据展示错乱问题排查问题   分析: 使用场景bug:tab切换,当点击tab2时,由于接口反应比较慢,在数据返回之前切换tab,会造成tab2的数据会拼接在......
  • Visual Studio Community 2022美化
    说明:VS版本:VisualStudioCommunity2022背景美化【扩展】【管理扩展】搜索“ClaudiaIDE”,【下载】,安装完扩展要重启VS在wallhaven下载壁纸图片作为文本编辑器区域背景图片【工具】【选项】搜索ClaudiaIDE,修改【图片路径】和【透明度】主题美化同样,在【扩展】里安装Visua......
  • Unity——常用快捷键
    (一)场景编辑(Scene)移动(GameObject):W旋转:E缩放:R(三维缩放,GameObject不会变形);T(单向缩放,GameObject会变形)以物体为中心观察:Alt+鼠标左键(第三人称视角)第一人称视角观察:鼠标右键加滑动缩放画面:Alt+鼠标右键将选中的对象放在屏幕中心:F(双击GameObject也有相同效果)相机视角调整与......
  • uniapp(全端兼容) - 最新详细实现 “卡片式堆叠“ 轮播图效果,堆叠在一起的轮播图片可
    效果图在uni-app微信小程序/手机h5网页网站/安卓app/苹果app/支付宝小程序/nvue等(全平台完美兼容)开发中,实现uniApp各端都兼容的图片堆叠轮播图功能,层叠轮播插件,详细实现上下层叠轮播图并且在全平台通用兼容,卡片叠加在一起的轮播翻滚,错开叠加来回拖曳左右滚动切换,支持修改......
  • AP Calculus Unit 7-10
    Unit7:DifferentialequationsSlopefields对于常微分方程\(\frac{dy}{dx}=f(x,y)\),我们可以画出其斜率场。具体来说,选出一些点(例如原点附近的数百个整点),利用常微分方程画出每个点处的斜率。看起来会像是这样:有一个基于Desmos的Slopefield生成器:SlopeFieldGen......
  • AP Calculus Unit 1-5
    全文的\(d\)和\(e\)不会写作正体\(\textd\)和\(\texte\),因为我懒,而且KhanAcademy上也没有这样写。Unit1:LimitsandcontinuityLimitTODO:Continuity若\(f\)满足:\[\lim\limits_{x\rightarrowc}f(x)=f(c)\]则称\(f\)在\(x=c\)处连续。若\(f\)......