uniapp返回上一页并实现刷新界面数据的完整代码

 更新时间:2024年04月23日 10:39:15   作者:卸载引擎  
从一个列表界面点击新增按钮,进入新增元素的界面,然后新增之后返回列表界面,并刷新列表界面,下面小编给大家分享uniapp返回上一页,并实现刷新界面数据的代码,感兴趣的朋友跟随小编一起看看吧

在uniapp中,经常会有返回上一页的情况,官方提供有 uni.navigateBack 这个api来实现效果,但是此方法返回到上一页之后页面并不会自动刷新(不会触发上一页的onLoad()方法)。

使用场景

从一个列表界面点击新增按钮,进入新增元素的界面,然后新增之后返回列表界面,并刷新列表界面。

效果实现

元素新增界面的代码:

if (res.code === 200) {
	const pages = getCurrentPages();
	const prevPage = pages[pages.length - 2]; // 上一个页面
	uni.$u.toast('操作成功');
	setTimeout(() => {
		uni.navigateBack({
			delta: 1,
			success: () => {
				prevPage.$vm.getList(); // 直接调用上个页面的刷新方法
			}
		});
	}, 1000);
} else {
	uni.$u.toast(res.msg);
}

列表界面的代码

async onLoad() {
	await this.getList(); // 自定义的刷新函数
},

利用获取页面栈 getCurrentPages() 方法, 在使用uni.navigateBack()返回成功后调用 beforepage.$vm.需刷新方法 即可完成返回并刷新。

到此这篇关于uniapp返回上一页,并实现刷新界面数据的文章就介绍到这了,更多相关uniapp刷新数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • innerHTML,outerHTML,innerText,outerText的用法及区别解析

    innerHTML,outerHTML,innerText,outerText的用法及区别解析

    本篇主要是对innerHTML,outerHTML,innerText,outerText的用法及区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript利用正则表达式去除日期中的-

    JavaScript利用正则表达式去除日期中的-

    页面的日期格式是:YYYY-MM-DD,而数据库中的日期格式是:YYYYMMDD,两者之间需要转换一下,本文利用正则表达式去掉-
    2014-06-06
  • javascript如何写热点图

    javascript如何写热点图

    这篇文章主要介绍了javascript如何写热点图,热点图是以点的形式展示,通过补全周边变化颜色也会相应的调整渐变,对热点图感兴趣的朋友可以参考一下
    2015-12-12
  • JavaScript实现256色转灰度图

    JavaScript实现256色转灰度图

    本文主要介绍了JavaScript实现256色转灰度图的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript 中使用Promise.all()方法经验技巧详解

    JavaScript 中使用Promise.all()方法经验技巧详解

    这篇文章主要为大家介绍了JavaScript 中使用Promise.all()方法经验技巧详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 微信小程序request请求封装,验签代码实例

    微信小程序request请求封装,验签代码实例

    这篇文章主要介绍了微信小程序request请求封装,验签代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 深度解析JavaScript对象继承

    深度解析JavaScript对象继承

    JavaScript中的对象继承是构建灵活、可维护代码的关键部分,本文主要介绍了深度解析JavaScript对象继承,包括原型链继承、构造函数继承、组合继承等,感兴趣的可以了解一下
    2024-01-01
  • js日期联动示例

    js日期联动示例

    这篇文章主要介绍了js实现的日期联动效果,调试需加入jquery文件,需要的朋友可以参考下
    2014-05-05
  • echarts图形x、y坐标文字设置间隔显示及相关问题详解

    echarts图形x、y坐标文字设置间隔显示及相关问题详解

    最近在做一个web的数据统计部分用到了Echart,下面这篇文章主要给大家介绍了关于echarts图形x、y坐标文字设置间隔显示及相关问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 细说webpack源码之compile流程-入口函数run

    细说webpack源码之compile流程-入口函数run

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。这篇文章主要介绍了webpack源码之compile流程-入口函数run,需要的朋友可以参考下
    2017-12-12

最新评论