How to jump back to the previous page in uniapp and refresh the page

Uniapp is a cross-platform mobile application development framework based on the Vue.js framework. During the development process, we often encounter the need to jump to the previous page and refresh the page. This article will introduce how to achieve this. this function.

1. Prerequisite knowledge

In the process of jumping back to the previous page and refreshing the page, two APIs need to be used: uni.navigateBack and uni.$emit.

uni.navigateBack is an API encapsulated by uniapp to jump to the previous page. Calling this API can jump directly to the previous page and pass parameters to the onLoad function of the previous page.

uni.$emit is an event triggering API encapsulated by uniapp. Through this API, a custom event can be triggered on the current page and data can be passed to other pages.

2. Implementation ideas

In the process of jumping back to the previous page and refreshing the page, we need to complete the following two steps:

1. On the above Get the parameters passed by the current page in the onLoad function of a page, and refresh the page according to the parameters.
2. Call uni.navigateBack on the current page to return to the previous page, trigger a custom event through uni.$emit, and pass parameters to the previous page.

Based on the above ideas, we implement the function of jumping back to the previous page and refreshing the page step by step.

3. Implementation steps

1. Get the parameters passed by the current page in the onLoad function of the previous page, and refresh the page according to the parameters.

In the onLoad function of the previous page, we can use the options object to obtain the parameters passed by the current page. By judging the value of the parameter, we can refresh the page.

The sample code is as follows:

onLoad: function(options) {
    if (options.refresh === 'true') {
        // 刷新操作
    }
}

2. Call uni.navigateBack on the current page to return to the previous page, trigger a custom event through uni.$emit, and pass parameters to the previous page Page.

In the current page, we can call uni.navigateBack to return to the previous page. But before returning to the previous page, we need to use uni.$emit to trigger a custom event and pass parameters to the previous page.

The sample code is as follows:

// 触发自定义事件并传递参数给上一页
uni.$emit('refresh', { refresh: true });

// 跳转回上一页
uni.navigateBack({
    delta: 1
});

In the previous page, we need to listen to the refresh event and refresh the page in the event callback function.

The sample code is as follows:

// 监听自定义事件并进行页面刷新操作
onShow: function() {
    uni.$on('refresh', (data) => {
        if (data.refresh) {
            // 刷新操作
        }
    });
},
onUnload: function() {
    uni.$off('refresh'); // 需要手动解绑自定义事件
}

Through the above steps, we have successfully implemented the function of jumping back to the previous page and refreshing the page.

4. Summary

This article introduces how to implement the function of jumping back to the previous page and refreshing the page in Uniapp development, by obtaining parameters in the onLoad function of the previous page and executing the page Refresh operation, and trigger custom events through uni.$emit on the current page and pass parameters to achieve page refresh. Through this method, we can easily implement the function of jumping back to the previous page and refreshing the page when developing Uniapp applications.

The above is the detailed content of How to jump back to the previous page in uniapp and refresh the page. For more information, please follow other related articles on the PHP Chinese website!