Bagaimana untuk menyelesaikan masalah gelongsor menukar halaman pada telefon mudah alih dalam pembangunan Vue

Dengan perkembangan pesat Internet mudah alih, semakin banyak laman web mula menerima pakai pembangunan mudah alih. Dalam pembangunan telefon mudah alih, gelongsor untuk menukar halaman adalah keperluan biasa. Sebagai rangka kerja bahagian hadapan yang popular, Vue menyediakan kami penyelesaian yang mudah untuk mencapai halaman beralih gelongsor.

Dalam pembangunan Vue, kami biasanya menggunakan Penghala Vue untuk mengurus penghalaan halaman. Penghala Vue menyediakan komponen pautan penghala yang boleh melompat antara halaman dengan mudah. Tetapi pada telefon mudah alih, kami mahu menukar halaman dengan meluncur dan bukannya mengklik. Berikut ialah contoh kod ringkas dengan dua halaman:

<template>
  <div>
    <router-link to="/page1">页面1</router-link>
    <router-link to="/page2">页面2</router-link>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}
</style>

Dalam kod di atas, kami melaksanakan lompatan antara halaman melalui komponen pautan penghala Penghala Vue. Melalui komponen peralihan Vue, kami boleh mencapai kesan animasi gelongsor halaman. Kami menetapkan "slaid" untuk atribut nama komponen peralihan dan menentukan gaya animasi yang berkaitan dalam teg gaya.

Apabila kami mengklik pautan pada halaman, Penghala Vue akan memuatkan komponen yang sepadan secara dinamik mengikut atribut kepada pautan, dan menentukan kesan animasi melalui atribut nama komponen peralihan. Dalam contoh ini, kami menggunakan animasi terjemahan untuk mencapai gelongsor halaman dengan menukar nilai translateX dalam atribut transform.

Selain menggunakan komponen peralihan, kami juga boleh menggunakan beberapa perpustakaan untuk memudahkan pembangunan halaman beralih gelongsor. Contohnya, pustaka BetterScroll boleh digunakan untuk menukar halaman dengan mudah dengan meluncur. Di bawah ialah contoh kod menggunakan perpustakaan BetterScroll:

<template>
  <div ref="wrapper">
    <div>
      <div>页面1</div>
      <div>页面2</div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  name: "App",
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      scrollX: true,
      eventPassthrough: "vertical",
      click: true,
    });
  },
  destroyed() {
    this.scroll.destroy();
  },
};
</script>

<style>
#app {
  overflow: hidden;
}

#app > div {
  white-space: nowrap;
}

#app > div > div {
  display: inline-block;
  width: 100vw;
}
</style>

Dalam kod di atas, kami menggunakan perpustakaan BetterScroll untuk mencipta bekas gelongsor dan mencapai penatalan mendatar dengan menetapkan sifat scrollX. Atribut scrollX membolehkan kami menukar halaman dengan meluncurkan jari kami pada telefon mudah alih. Dalam fungsi cangkuk yang dipasang, kami mencipta contoh BetterScroll dan memberikannya rujukan kepada bekas gelongsor. Kami juga menetapkan sifat eventPassthrough kepada "menegak" supaya gerak isyarat gelongsor menegak juga akan dihantar ke bekas gelongsor. Akhir sekali, kami memusnahkan contoh BetterScroll dalam fungsi cangkuk yang dimusnahkan.

Di atas adalah dua penyelesaian untuk menyelesaikan masalah penukaran halaman gelongsor pada telefon mudah alih dalam pembangunan Vue. Dengan menggunakan Penghala Vue dan komponen peralihan, kami boleh mencapai kesan animasi gelongsor Dengan menggunakan perpustakaan BetterScroll, kami boleh mencapai kesan halaman beralih gelongsor. Mengikut keperluan sebenar, kita boleh memilih penyelesaian yang sesuai dengan kita untuk mencapai kesan gelongsor beralih halaman pada telefon bimbit.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah gelongsor menukar halaman pada telefon mudah alih dalam pembangunan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!