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

 更新时间:2023年11月29日 09:13:47   作者:老马甲  
本文主要介绍了uniapp中uni.navigateBack返回后刷新页面数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、前言

在移动端中,数据列表中某项数据点击编辑,进入下一个页面编辑数据,保存后回退到数据列表页,此时需要刷新列表数据,否则显示的列表数据还是旧的。这种场景感觉很多地方都有出现,是需要详细说说方法,也就是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中uni.navigateBack返回后刷新页面数据的实现的文章就介绍到这了,更多相关uniapp uni.navigateBack返回刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS设计模式之访问者模式的用法详解

    JS设计模式之访问者模式的用法详解

    JS访问者模式是一种行为型设计模式,用于将算法与对象结构分离, 该模式允许你定义新的操作(访问者)而无需修改现有对象结构(被访问者), 通过这种方式,你可以在不改变对象结构的情况下添加新的操作,本文就给大家详细的讲讲JS访问者模式的用法
    2023-08-08
  • 微信小程序之间的参数传递、获取的操作方法

    微信小程序之间的参数传递、获取的操作方法

    这篇文章主要介绍了微信小程序中如何获取和传递参数,包括获取当前页面参数、单独input文本框参数的获取、表单获取参数信息、点击表格单元格信息获取行ID以及前端页面跳转传递多个参数等,感兴趣的朋友跟随小编一起看看吧
    2025-01-01
  • 跟我学习javascript的函数和函数表达式

    跟我学习javascript的函数和函数表达式

    跟我学习javascript的函数和函数表达式,详细介绍了函数表达式、命名函数表达式的方法,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript 利用Cookie记录用户登录信息

    JavaScript 利用Cookie记录用户登录信息

    JavaScript与Cookie之利用Cookie记录用户登录信息
    2009-12-12
  • javascript中的取反再取反~~没有意义

    javascript中的取反再取反~~没有意义

    操作符~, 是按位取反的意思,表面上~~(取反再取反)没有意义,下面有个不错的示例,大家可以参考下
    2014-04-04
  • js闭包实现按秒计数

    js闭包实现按秒计数

    闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话,因为他描述的太学术。其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包。
    2015-04-04
  • 用nodejs访问ActiveX对象,以操作Access数据库为例。

    用nodejs访问ActiveX对象,以操作Access数据库为例。

    有人提问“如果用nodejs访问sql server?” 找了找资料,发现有两类解决方法,使用第三方nodejs插件
    2011-12-12
  • JS中跳转传参的几种常用方法总结

    JS中跳转传参的几种常用方法总结

    在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,下面这篇文章主要给大家总结介绍了关于JS中跳转传参的几种常用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • JavaScript文件的同步和异步加载的实现代码

    JavaScript文件的同步和异步加载的实现代码

    本篇文章主要介绍了JavaScript文件的同步和异步加载的实现代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • js微信扫描二维码登录网站技术原理

    js微信扫描二维码登录网站技术原理

    这篇文章主要介绍了js微信扫描二维码登录网站技术原理,具有一定的参考价值,有需要的可以了解一下。
    2016-12-12

最新评论