Penyelesaian kepada gerak isyarat gelongsor kembali dalam terminal mudah alih Vue

Dengan populariti peranti mudah alih, semakin ramai pengguna terbiasa menggunakan gerak isyarat gelongsor untuk bertukar antara halaman. Dalam pembangunan Vue, kaedah penukaran halaman berdasarkan Penghala Vue biasanya menggunakan kaedah penghalaan tolak dan ganti. Walau bagaimanapun, penukaran halaman yang dilaksanakan dengan cara ini mempunyai masalah tertentu apabila gerak isyarat mudah alih meluncur kembali. Artikel ini akan memperkenalkan cara menyelesaikan masalah pemulangan gelongsor gerak isyarat mudah alih dalam pembangunan Vue.

Untuk menyelesaikan masalah pengembalian gelongsor gerak isyarat pada terminal mudah alih, kita perlu menggunakan pemalam Vue vue-touch dan vue-router plug-in. Pemalam vue-touch ialah enkapsulasi Vue bagi operasi gerak isyarat mudah alih dan boleh mengecam operasi gerak isyarat pada peranti mudah alih, seperti leret ke kiri, leret ke kanan, dsb. Pemalam vue-router ialah pemalam yang disediakan secara rasmi oleh Vue untuk pengurusan penghalaan halaman.

Pertama, kita perlu memasang pemalam vue-touch dan vue-router. Ia boleh dipasang melalui arahan npm:

npm install vue-touch vue-router --save

Selepas memasang pemalam, kita perlu mengimport dan mendaftarkan kedua-dua pemalam ini dalam fail program utama:

import Vue from 'vue';
import VueTouch from 'vue-touch';
import VueRouter from 'vue-router';

Vue.use(VueTouch);
Vue.use(VueRouter);

Seterusnya, dalam konfigurasi penghalaan Penghala Vue, kita perlu menambah pengawal hadapan global disediakan untuk menentukan sama ada pengguna meluncur ke belakang melalui gerak isyarat atau mengklik butang belakang untuk kembali apabila halaman bertukar. Dalam pengawal hadapan global, kita boleh memutuskan sama ada untuk kembali dengan slaid gerak isyarat atau klik butang kembali dengan menilai arah kemasukan laluan:

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
});

router.beforeEach((to, from, next) => {
  const direction = router.app.$options.direction || '';

  if (direction === 'back') {
    // 手势滑动返回
    router.app.$options.direction = '';
    router.app.$options.transition = 'slide-right';
  } else {
    // 点击返回按钮返回
    router.app.$options.transition = 'slide-left';
    window.history.pushState(null, '', location.href);
  }

  next();
});

Dalam pengawal hadapan global, kami mula-mula menilai bahawa arah masuk laluan adalah slaid gerak isyarat kembali (arah sebagai 'kembali') atau klik butang kembali untuk kembali. Jika slaid gerak isyarat kembali, kami menetapkan semula nilai arah kepada mengosongkan dan menetapkan animasi menukar halaman kepada slaid dari kanan ke kiri. Jika anda kembali dengan mengklik butang kembali, kami menetapkan animasi penukaran halaman untuk slaid dari kiri ke kanan dan mensimulasikan klik butang kembali melalui kaedah window.history.pushState.

Akhir sekali, dalam setiap komponen halaman Vue, kita perlu menggunakan pemalam vue-touch untuk mendengar acara gelongsor gerak isyarat peranti mudah alih, dan menentukan sama ada gerak isyarat gelongsor kembali atau meluncur ke halaman seterusnya berdasarkan jarak gelongsor. Dalam komponen halaman, kita boleh menggunakan kaedah leret pemalam vue-touch untuk mendengar acara gelongsor kiri dan kanan:

export default {
  mounted() {
    this.$watch('$options.transition', (to, from) => {
      if (to === 'slide-right') {
        this.go(-1);
      } else if (to === 'slide-left') {
        this.go(1);
      }
    });
  },
  methods: {
    go(delta) {
      const distance = window.innerWidth * 0.3; // 适应不同设备的滑动距离

      if (delta === -1 && this.$route.meta.index > 1) {
        // 手势滑动返回到上一页面
        this.$router.back();
      } else if (delta === 1 && this.$route.meta.index < this.$router.options.routes.length) {
        // 手势滑动到下一页面
        this.$router.push(this.$router.options.routes[this.$route.meta.index + 1]);
      }
    }
  }
};

Dalam fungsi kitaran hayat yang dipasang komponen halaman, kita boleh menggunakan kaedah $watch untuk dengar perubahan dalam animasi penukaran halaman . Apabila animasi penukaran halaman berubah kepada gelongsor dari kanan ke kiri, kami memanggil kaedah pergi untuk melakukan gerak isyarat gelongsor kembali. Apabila animasi penukaran halaman berubah kepada gelongsor dari kiri ke kanan, kami memanggil kaedah pergi untuk melakukan gerak isyarat gelongsor ke halaman seterusnya.

Dalam kaedah pergi, kami mula-mula mengira jarak gelongsor skrin berbeza peranti mudah alih. Kemudian, kami menentukan sama ada gerak isyarat meluncur ke belakang atau gerak isyarat meluncur ke halaman seterusnya berdasarkan arah slaid. Jika ia adalah gerak gelongsor kembali dan indeks halaman semasa lebih besar daripada 1, kami memanggil kaedah $router.back untuk melakukan gerak isyarat gelongsor kembali. Jika gerak isyarat digunakan untuk meluncur ke halaman seterusnya dan indeks halaman semasa adalah kurang daripada bilangan halaman dalam konfigurasi penghalaan, kami memanggil kaedah $router.push untuk melakukan gerak isyarat untuk meluncur ke halaman seterusnya.

Melalui operasi di atas, kami boleh menyelesaikan masalah pengembalian gelongsor gerak isyarat mudah alih dalam pembangunan Vue dengan berkesan. Menggunakan pemalam vue-touch dan vue-router, kami boleh memantau dengan mudah acara gelongsor gerak isyarat peranti mudah alih dan menentukan sama ada gerak isyarat gelongsor kembali atau gerak isyarat meluncur ke halaman seterusnya berdasarkan jarak gelongsor. Dengan cara ini, ia boleh meningkatkan pengalaman pengguna pada terminal mudah alih dan menjadikan penukaran halaman lebih lancar.

Atas ialah kandungan terperinci Penyelesaian kepada gerak isyarat gelongsor kembali dalam terminal mudah alih Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!