Comment revenir à la page précédente dans Uniapp et actualiser la page

Uniapp est un framework de développement d'applications mobiles multiplateforme développé sur la base du framework Vue.js. Au cours du processus de développement, nous rencontrons souvent le besoin de passer à la page précédente et d'actualiser la page. Cet article expliquera comment y parvenir. Fonction.

1. Connaissances préalables

Pour revenir à la page précédente et actualiser la page, deux API doivent être utilisées : uni.navigateBack et uni.$emit.

uni.navigateBack est une API encapsulée par uniapp pour passer à la page précédente. L'appel de cette API peut passer directement à la page précédente et transmettre des paramètres à la fonction onLoad de la page précédente.

uni.$emit est une API de déclenchement d'événements encapsulée par uniapp. Grâce à cette API, un événement personnalisé peut être déclenché sur la page actuelle et les données peuvent être transmises à d'autres pages.

2. Idées d'implémentation

Dans le processus de retour à la page précédente et d'actualisation de la page, nous devons effectuer les deux étapes suivantes :

1. Récupérer les paramètres transmis par la page actuelle dans la fonction onLoad de la précédente. page et actualisez la page en fonction des paramètres.
2. Appelez uni.navigateBack sur la page actuelle pour revenir à la page précédente, déclenchez un événement personnalisé via uni.$emit et transmettez les paramètres à la page précédente.

Sur la base des idées ci-dessus, nous implémentons la fonction de retour à la page précédente et d'actualisation de la page étape par étape.

3. Étapes de mise en œuvre

1. Récupérez les paramètres passés par la page actuelle dans la fonction onLoad de la page précédente, et actualisez la page en fonction des paramètres.

Dans la fonction onLoad de la page précédente, nous pouvons utiliser l'objet options pour obtenir les paramètres passés par la page actuelle. En jugeant la valeur du paramètre, nous pouvons rafraîchir la page.

L'exemple de code est le suivant :

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

2. Appelez uni.navigateBack sur la page actuelle pour revenir à la page précédente, déclenchez un événement personnalisé via uni.$emit et transmettez les paramètres à la page précédente.

Dans la page actuelle, on peut appeler uni.navigateBack pour revenir à la page précédente. Mais avant de revenir à la page précédente, nous devons utiliser uni.$emit pour déclencher un événement personnalisé et transmettre les paramètres à la page précédente.

L'exemple de code est le suivant :

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

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

Dans la page précédente, nous devons écouter l'événement d'actualisation et actualiser la page dans la fonction de rappel d'événement.

L'exemple de code est le suivant :

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

Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de retour à la page précédente et d'actualisation de la page.

4. Résumé

Cet article présente comment implémenter la fonction de retour à la page précédente et d'actualisation de la page dans le développement Uniapp, en obtenant les paramètres dans la fonction onLoad de la page précédente et en effectuant l'opération d'actualisation de la page, et sur la page actuelle Déclenchez des événements personnalisés via uni.$emit et transmettez les paramètres pour actualiser la page. Grâce à cette méthode, nous pouvons facilement implémenter la fonction de retour à la page précédente et d'actualisation de la page lors du développement d'applications Uniapp.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!