uni-app:切换页面刷新,返回上一页刷新(onShow钩子函数的使用)

切换页面刷新:通过onShow()便可实现

返回上一页通过uni.navigateBack({delta: 1});实现

以返回上一页刷新为例

从B页面返回上一页到A页面

在A页面写入方法refreshHandler()

javascript 复制代码
methods: {	
    // 执行刷新逻辑
	refreshHandler() {
		uni.request({
			url: getApp().globalData.position + 'Produce/select_producting',
			data: {
				username: getApp().globalData.username
			},
			header: {
				"Content-Type": "application/x-www-form-urlencoded"
			},
			method: 'POST',
			dataType: 'json',
			success: res => {
				this.info = res.data.info;
			},
			fail(res) {
				console.log("查询失败")
			}
		})
	}
},

在A页面写入onLoad(),onShow()

onLoad():首次进入页面时执行的方法,这里直接引入refreshHandler() 可以直接查询到页面数据

onShow():进入页面执行的方法,主要切换到本页面就会执行该方法,这里也是直接引入refreshHandler()函数,可以在每次进入页面时,执行数据刷新(写入onShow(),便可解决进入页面不刷新的问题,返回上一页刷新的问题也会解决)

javascript 复制代码
//刚进入页面执行的操作
onLoad() {
	this.refreshHandler()
},
//进入页面这行的操作
onShow() {
	this.refreshHandler()		
}

在B页面执行返回A页面的操作

javascript 复制代码
methods: {
    is_back(e) {
	    console.log('返回')
	    uni.showToast({
		    title: '成功',
	    })
	    setTimeout(function() {
		    //返回上一页
		    uni.navigateBack({
		        delta: 1,
		    });
	    }, 500)
    },
},

核心

uni.navigateBack({
delta: 1,
});

这段代码的作用是返回上一个页面,delta参数指定了返回的层数。在这里,delta为1表示返回上一层(即当前页面的前一个页面)。

**注:**uni.navigateBack函数是由uni-app框架提供的,用于在多页面应用中返回上一个页面。它类似于浏览器的后退按钮功能。

如果你希望执行该函数后刷新上一个页面,你可以使用下面的方式:

当成功返回上一个页面后,会调用上一个页面的onLoad生命周期函数进行刷新操作。

uni.navigateBack({
delta: 1,
success: function () {
const pages = getCurrentPages(); //获取当前页面栈
const prevPage = pages[pages.length - 1]; //获取上一个页面实例对象
prevPage.onLoad(); //调用上一个页面的onLoad方法
}
});

相关推荐
Hello--_--World2 分钟前
ES13:类私有属性和方法、顶层 await、at() 方法、Object.hasOwnProperty()、类静态块 相关知识点
开发语言·javascript·es13
comerzhang65523 分钟前
Web 性能的架构边界:跨线程信令通道的确定性分析
javascript·webassembly
Hooray26 分钟前
为了在 Vue 项目里用上想要的 React 组件,我写了这个 skill
前端·ai编程
咸鱼翻身了么28 分钟前
模仿ai数据流 开箱即用
前端
风花雪月_28 分钟前
🔥IntersectionObserver:前端性能优化的“隐形监工”
前端
Bigger28 分钟前
告别 AI 塑料感:我是如何用 frontend-design skill 重塑项目官网的
前端·ai编程·trae
发际线向北28 分钟前
0x02 Android DI 框架解析之Hilt
前端
zhensherlock42 分钟前
Protocol Launcher 系列:Overcast 一键订阅播客
前端·javascript·typescript·node.js·自动化·github·js
liangdabiao1 小时前
开源AI拼豆大升级 - 一键部署cloudflare page - 全免费 web和小程序
前端·人工智能·小程序
SuperHeroWu72 小时前
【鸿蒙基础入门】概念理解和学习方法论说明
前端·学习·华为·开源·harmonyos·鸿蒙·移动端