当前位置：首页 > news >正文

uni-app切换页面刷新，返回上一页刷新（onShow钩子函数的使用）

news 2025/8/12 10:22:34

切换页面刷新：通过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方法}
});