uniapp で前のページに戻ってページを更新する方法

Uniapp は、Vue.js フレームワークをベースにしたクロスプラットフォームのモバイル アプリケーション開発フレームワークです。開発プロセス中に、前のページにジャンプしてページを更新する必要がよく発生します。この記事では、これを実現する方法を紹介します。 . この機能。

1. 前提知識

前のページに戻ってページを更新するプロセスでは、uni.navigateBack と uni.$emit の 2 つの API を使用する必要があります。

uni.navigateBack は、前のページにジャンプするために uniapp によってカプセル化された API であり、この API を呼び出すと、前のページに直接ジャンプし、前のページの onLoad 関数にパラメータを渡すことができます。

uni.$emit は、uniapp によってカプセル化されたイベント トリガー API です。この API を通じて、現在のページでカスタム イベントをトリガーし、データを他のページに渡すことができます。

2. 実装のアイデア

前のページに戻ってページを更新するプロセスでは、次の 2 つの手順を完了する必要があります:

1. On上記は、ページの onLoad 関数で現在のページによって渡されたパラメーターを取得し、パラメーターに従ってページを更新します。
2. 現在のページで uni.navigateBack を呼び出して前のページに戻り、uni.$emit を通じてカスタム イベントをトリガーし、パラメーターを前のページに渡します。

上記の考えに基づいて、前のページにジャンプしてページを段階的に更新する機能を実装します。

3. 実装手順

1. 前のページの onLoad 関数で現在のページから渡されたパラメーターを取得し、パラメーターに従ってページを更新します。

前のページの onLoad 関数では、options オブジェクトを使用して、現在のページから渡されるパラメーターを取得できます。パラメータの値を判断することで、ページを更新できます。

サンプル コードは次のとおりです。

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

2. 現在のページで uni.navigateBack を呼び出して前のページに戻り、uni.$emit を通じてカスタム イベントをトリガーし、渡します。パラメータを前のページへ移動します。

現在のページでは、uni.navigateBack を呼び出して前のページに戻ることができます。ただし、前のページに戻る前に、uni.$emit を使用してカスタム イベントをトリガーし、パラメーターを前のページに渡す必要があります。

サンプル コードは次のとおりです。

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

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

前のページでは、更新イベントをリッスンし、イベント コールバック関数でページを更新する必要があります。

サンプルコードは以下のとおりです。

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

上記の手順により、前のページに戻ってページを更新する機能を実装することができました。

4. まとめ

この記事では、Uniapp開発において、前ページのonLoad関数でパラメータを取得し、前のページにジャンプしてページを更新する機能を実装する方法を紹介します。ページの更新操作を実行し、現在のページで uni.$emit を介してカスタム イベントをトリガーし、パラメータを渡してページの更新を実現します。この方法により、Uniapp アプリケーションを開発する際に、前のページに戻ってページを更新する機能を簡単に実装できます。

以上がuniapp で前のページに戻ってページを更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。