vue/uniapp - 返回上一页并onLoad/onShow刷新数据列表接口

目录

在uni中,返回页面是不会触发 onLoad方法的;

如果我们只想在特定情况下返回上一页才需要刷新数据,那么用onShow的话,那刷新就太频繁了;

这时候,可以用$emit$on去解决。

比如说,从详情页(detail.vue) 回到 列表页(list.vue):

详情页(detail.vue):

进入的页面

html 复制代码
<view @click="submitFunc">
	点击返回列表页面,并且刷新列表接口
</view>
javascript 复制代码
methods:{
	back() {
		uni.$emit('refreshData');
		uni.navigateBack({
			delta: 1
		})
	},
	submitFunc() {
		// 按钮点击返回,调用back()方法
		this.back();
	}
}

列表页(list.vue)

javascript 复制代码
onLoad() {
	// 正常进入该页面的获取数据
	this.getData();
	// 从详情页返回该页面的获取数据
	uni.$on('refreshData',() => {
		// 调用列表接口
		this.getData();
	})
},
methods:{
	// 列表接口
	getData() {
		// 请求数据接口
		... ...
	}
}

大佬

给大佬暴赞👍👍👍👍👍👍

大佬地址:https://blog.csdn.net/mossbaoo/article/details/115963129

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
2501_915918413 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js