【uniapp】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.需刷新方法 即可完成返回并刷新。

相关推荐

  1. uniapp返回刷新数据

    2024-04-21 16:00:03       55 阅读
  2. uni-app实现返回刷新

    2024-04-21 16:00:03       62 阅读
  3. 微信小程序返回刷新组件数据

    2024-04-21 16:00:03       44 阅读
  4. Vue2中返回面,如何实现数据刷新

    2024-04-21 16:00:03       36 阅读
  5. 优雅实现uniapp返回传参

    2024-04-21 16:00:03       32 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-21 16:00:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-21 16:00:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-21 16:00:03       87 阅读
  4. Python语言-面向对象

    2024-04-21 16:00:03       96 阅读

热门阅读

  1. 安卓手机APP开发__媒体开发部分__媒体项

    2024-04-21 16:00:03       36 阅读
  2. Golang:三种引号详解-单引号、双引号、反引号

    2024-04-21 16:00:03       32 阅读
  3. 【EXCEL自动化10】pandas提取指定数据 + 批量求和

    2024-04-21 16:00:03       38 阅读
  4. 使用HttpsURLConnection请求https报错

    2024-04-21 16:00:03       32 阅读
  5. 【AI 测试】自然语言处理(NLP)类项目如何测试

    2024-04-21 16:00:03       32 阅读