Bagaimana untuk melompat kembali ke halaman sebelumnya dalam uniapp dan muat semula halaman

Uniapp ialah rangka kerja pembangunan aplikasi mudah alih merentas platform yang dibangunkan berdasarkan rangka kerja Vue.js Semasa proses pembangunan, kami sering menghadapi keperluan untuk melompat ke halaman sebelumnya dan memuat semula halaman ini.

1. Pengetahuan prasyarat

Dalam proses melompat kembali ke halaman sebelumnya dan menyegarkan halaman, dua API perlu digunakan: uni.navigateBack dan uni.$emit.

uni.navigateBack ialah API yang dirangkumkan oleh uniapp untuk melompat ke halaman sebelumnya. Memanggil API ini boleh melompat terus ke halaman sebelumnya dan menghantar parameter ke fungsi onLoad halaman sebelumnya.

uni.$emit ialah API pencetus peristiwa yang dirangkumkan oleh uniapp Melalui API ini, peristiwa tersuai boleh dicetuskan pada halaman semasa dan data boleh dihantar ke halaman lain.

2. Idea Pelaksanaan

Dalam proses melompat kembali ke halaman sebelumnya dan menyegarkan halaman, kita perlu menyelesaikan dua langkah berikut:

1. Hidup di atas Dapatkan parameter yang diluluskan oleh halaman semasa dalam fungsi onLoad halaman, dan muat semula halaman mengikut parameter.
2. Panggil uni.navigateBack pada halaman semasa untuk kembali ke halaman sebelumnya, cetuskan acara tersuai melalui uni.$emit dan hantar parameter ke halaman sebelumnya.

Berdasarkan idea di atas, kami melaksanakan fungsi melompat kembali ke halaman sebelumnya dan menyegarkan halaman langkah demi langkah.

3. Langkah pelaksanaan

1. Dapatkan parameter yang diluluskan oleh halaman semasa dalam fungsi onLoad halaman sebelumnya dan muat semula halaman mengikut parameter.

Dalam fungsi onLoad pada halaman sebelumnya, kita boleh menggunakan objek pilihan untuk mendapatkan parameter yang diluluskan oleh halaman semasa. Dengan menilai nilai parameter, kami boleh memuat semula halaman.

Kod sampel adalah seperti berikut:

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

2. Panggil uni.navigateBack pada halaman semasa untuk kembali ke halaman sebelumnya dan cetuskan acara tersuai melalui uni.$emit , dan hantar parameter ke halaman Sebelumnya.

Dalam halaman semasa, kita boleh menghubungi uni.navigateBack untuk kembali ke halaman sebelumnya. Tetapi sebelum kembali ke halaman sebelumnya, kita perlu menggunakan uni.$emit untuk mencetuskan acara tersuai dan menghantar parameter ke halaman sebelumnya.

Kod sampel adalah seperti berikut:

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

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

Dalam halaman sebelumnya, kita perlu mendengar acara muat semula dan muat semula halaman dalam fungsi panggil balik acara.

Kod sampel adalah seperti berikut:

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

Melalui langkah di atas, kami telah berjaya melaksanakan fungsi melompat kembali ke halaman sebelumnya dan menyegarkan halaman.

4. Ringkasan

Artikel ini memperkenalkan cara melaksanakan fungsi melompat kembali ke halaman sebelumnya dan menyegarkan halaman dalam pembangunan Uniapp, dengan mendapatkan parameter dalam fungsi onLoad halaman sebelumnya dan melaksanakan operasi Muat Semula halaman, dan mencetuskan peristiwa tersuai melalui uni.$emit pada halaman semasa dan lulus parameter untuk mencapai muat semula halaman. Melalui kaedah ini, kita boleh dengan mudah melaksanakan fungsi melompat kembali ke halaman sebelumnya dan menyegarkan halaman semasa membangunkan aplikasi Uniapp.

Atas ialah kandungan terperinci Bagaimana untuk melompat kembali ke halaman sebelumnya dalam uniapp dan muat semula halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!