本文主要是介绍uni-app切换页面刷新,返回上一页刷新(onShow钩子函数的使用),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
切换页面刷新:通过onShow()便可实现
返回上一页通过uni.navigateBack({delta: 1});
实现
以返回上一页刷新为例
从B页面返回上一页到A页面,在A页面写入方法refreshHandler()
//a.vue
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(),便可解决进入页面不刷新的问题,返回上一页刷新的问题也会解决)
//刚进入页面执行的操作
onLoad() {this.refreshHandler()
},
//进入页面这行的操作
onShow() {this.refreshHandler()
}
在B页面执行返回A页面的操作
//b.vue
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框架提供的,用于在多页面应用中返回上一个页面。它类似于浏览器的后退按钮功能。
如果你希望执行该函数后刷新上一个页面,你可以使用下面的方式:
当成功返回上一个页面后,会调用上一个页面的onShow生命周期函数
进行刷新操作。
uni.navigateBack({delta: 1,success: function () {const pages = getCurrentPages(); //获取当前页面栈const prevPage = pages[pages.length - 1]; //获取上一个页面实例对象prevPage.onLoad(); //调用上一个页面的onLoad方法}
});
总结:
方法一:直接在onShow()
生命周期调用方法;
方法二:使用uni.navigateBack
返回调用上一个页面的onLoad方法
这篇关于uni-app切换页面刷新,返回上一页刷新(onShow钩子函数的使用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!