Cara menggunakan Vue untuk melaksanakan kesan kembali ke atas

Cara menggunakan Vue untuk melaksanakan kesan kembali ke atas

Pengenalan:
Dalam reka bentuk web moden, butang kembali ke atas ialah Fungsi biasa, ia menyediakan pengguna dengan operasi yang mudah, membolehkan pengguna kembali ke bahagian atas halaman dengan mudah. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue untuk melaksanakan fungsi ini dan memberikan contoh kod khusus.

1. Buat projek Vue:
Pertama, kita perlu mencipta projek Vue, yang boleh dibuat dengan cepat menggunakan Vue CLI. Buka terminal dan laksanakan arahan berikut:

vue create back-to-top
cd back-to-top

Kemudian pilih konfigurasi lalai dan tunggu projek dibuat.

2. Tambahkan butang kembali ke atas:
Dalam projek Vue, kita boleh meletakkan butang kembali ke atas dalam komponen App.vue. Buka fail src/App.vue dan tambahkan kod berikut pada templat:

<template>
  <div id="app">
    <!-- 页面内容 -->
    <router-view/>

    <!-- 返回顶部按钮 -->
    <button class="back-to-top" v-show="scrollPosition > 100" @click="backToTop">
      返回顶部
    </button>
  </div>
</template>

Dalam kod di atas, kami menggunakan arahan v-show untuk mengawal paparan dan menyembunyikan butang kembali ke atas . Apabila kedudukan tatal lebih besar daripada 100, butang dipaparkan; Nilai arahan v-show ialah jenis Boolean, dan kedudukan tatal diperoleh secara dinamik dengan mengira sifat scrollPosition.

3 Laksanakan fungsi kembali ke atas:
Tambahkan pembolehubah bernama scrollTop dalam data dan mulakannya kepada 0:

data() {
  return {
    scrollTop: 0,
  }
},

Kemudian, kita perlu Dengarkan tatal acara tetingkap dan kemas kini nilai scrollPosition. Tambahkan kod berikut dalam cangkuk kitaran hayat yang dipasang:

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  },
},

Dalam kod di atas, kami menggunakan sifat window.pageYOffset untuk mendapatkan kedudukan skrol semasa. Dalam sesetengah penyemak imbas lama, atribut ini mungkin tidak disokong, jadi kami menggunakan dua kaedah penulisan keserasian: document.documentElement.scrollTop dan document.body.scrollTop.

Akhir sekali, kita perlu menambah kaedah backToTop untuk melaksanakan fungsi menatal ke bahagian atas halaman. Tambahkan kod berikut dalam kaedah:

methods: {
  // 其他代码...

  backToTop() {
    const duration = 500 // 动画持续时间
    const startPos = this.scrollTop // 当前滚动位置
    const startTime = performance.now() // 开始时间

    const animateScroll = (timestamp) => {
      const elapsed = timestamp - startTime // 已经过去的时间
      const progress = Math.min(elapsed / duration, 1) // 完成百分比
      const easeProgress = 0.5 - 0.5 * Math.cos(progress * Math.PI) // 缓动效果的百分比

      window.scrollTo(0, startPos * (1 - easeProgress)) // 滚动到顶部

      if (progress < 1) {
        requestAnimationFrame(animateScroll)
      }
    }

    requestAnimationFrame(animateScroll)
  },
}

Dalam kod di atas, kami menggunakan kaedah requestAnimationFrame untuk mencapai kesan animasi. Dengan mengira peratusan yang berbeza, kami melaksanakan animasi tatal ke atas dengan kesan pelonggaran.

4. Tambah gaya:
Tambah beberapa gaya pada butang kembali ke atas, buka fail src/App.vue dan tambah kod berikut pada gaya:

In Dalam kod di atas, kami menambahkan beberapa gaya asas pada butang dan menambah kesan leding kecerunan padanya.

Ringkasan:
Melalui langkah di atas, kami berjaya melaksanakan fungsi menggunakan rangka kerja Vue untuk melaksanakan kembali ke kesan teratas. Kami mencipta projek Vue, meletakkan butang kembali ke atas dalam komponen App.vue, dan menggunakan arahan Vue serta sifat pengiraan untuk mengawal paparan dan penyembunyian butang. Pada masa yang sama, kami mendengar acara tatal tetingkap dan melaksanakan fungsi tatal ke atas melalui kesan animasi. Saya harap artikel ini akan membantu anda dalam mempelajari rangka kerja Vue dan melaksanakan kesan kembali ke atas.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan kesan kembali ke atas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!