uni-app: switch page refresh, return to previous page refresh (use of onShow hook function)

Switch page refresh: can be realized through onShow()

Return to the previous page through uni.navigateBack({delta: 1});

Take returning to the previous page to refresh as an example

Return to the previous page from page B to page A

Write method refreshHandler() on page A

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("查询失败")
			}
		})
	}
},

Write onLoad(), onShow() on page A

 onLoad(): The method executed when entering the page for the first time, directly introduce refreshHandler() here to directly query the page data

onShow(): The method of entering the page to execute, mainly switching to this page will execute this method, here is also directly introduced the refreshHandler() function, you can perform data refresh every time you enter the page (write onShow(), you can Solve the problem that the entering page does not refresh, and the problem of returning to the previous page to refresh will also be solved)

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

Execute the operation of returning to page A on page B

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

core

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

The function of this code is to return to the previous page, and the delta parameter specifies the number of layers to return. Here, delta is 1 means to return to the previous layer (that is, the previous page of the current page).

Note: The uni.navigateBack function is provided by the uni-app framework and is used to return to the previous page in a multi-page application. It is similar to the browser's back button functionality.

If you want to refresh the previous page after executing this function, you can use the following method:

After successfully returning to the previous page, onLoadthe life cycle function of the previous page will be called to perform the refresh operation.

uni.navigateBack({     delta: 1,     success: function () {         const pages = getCurrentPages(); //Get the current page stack         const prevPage = pages[pages.length - 1]; //Get the previous page instance object         prevPage. onLoad(); //Call the onLoad method of the previous page     } });






Guess you like

Origin blog.csdn.net/weixin_46001736/article/details/131888456