Bagaimana untuk mencapai kesan siling dalam vue

PHPz
Lepaskan: 2023-04-18 13:44:07
asal
1484 orang telah melayarinya

Kata Pengantar

Dalam aplikasi web, kita selalunya perlu mengekalkan satu atau lebih elemen dalam halaman dalam kedudukan tetap apabila halaman itu ditatal. Kesan ini sering dipanggil kesan siling kerana ia membuatkan elemen kekal pada tempatnya seolah-olah ia dilekatkan pada bahagian atas halaman.

Dalam Vue, terdapat pelbagai cara untuk mencapai kesan siling. Artikel ini menerangkan salah satu kaedah ini dan menyediakan kod sampel.

Kaedah

Cara untuk mencapai kesan siling dalam Vue ialah mendengar peristiwa tatal halaman, mengira hubungan kedudukan antara kedudukan skrol semasa dan elemen siling dan menambah atau mengalih keluar CSS secara dinamik gaya.

Langkah-langkah khusus adalah seperti berikut:

  1. Tentukan pembolehubah untuk menandakan sama ada elemen siling perlu ditetapkan di bahagian atas halaman. Sebagai contoh, dalam contoh di bawah, kami menggunakan pembolehubah yang dipanggil isFixed.
data() {
  return {
    isFixed: false
  }
},
Salin selepas log masuk
  1. Dalam fungsi cangkuk mounted, tambahkan pendengar acara tatal halaman.
mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
Salin selepas log masuk
  1. Tentukan fungsi methods yang mengendalikan acara tatal dalam handleScroll, dan kirakan hubungan kedudukan antara kedudukan tatal semasa dan elemen siling dalam fungsi ini.
methods: {
  handleScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    const testEle = this.$refs.test
    if (scrollTop > testEle.offsetTop) {
      this.isFixed = true
    } else {
      this.isFixed = false
    }
  }
},
Salin selepas log masuk

Dalam kod di atas, kami memperoleh kedudukan tatal halaman semasa dan kedudukan elemen siling (gunakan $refs untuk mendapatkan rujukan elemen). Kemudian, kami menetapkan nilai pembolehubah isFixed berdasarkan hubungan kedudukan antara kedudukan skrol semasa dan elemen siling.

  1. Dalam atribut class elemen siling, ikat nama kelas fixed secara dinamik Kemunculan nama kelas bergantung pada nilai pembolehubah isFixed.
<div ref="test" :class="{fixed: isFixed}">
  // 吸顶元素的内容
</div>
Salin selepas log masuk

Kod penuh

Berikut ialah contoh mudah yang menunjukkan cara menggunakan Vue untuk mencapai kesan siling.

<template>
  <div>
    <div class="header">
      // 头部元素的内容
    </div>
    <div ref="test" :class="{fixed: isFixed}">
      // 吸顶元素的内容
    </div>
    <div class="content">
      // 页面内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFixed: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const testEle = this.$refs.test
      if (scrollTop > testEle.offsetTop) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    }
  }
}
</script>

<style>
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
.header {
  height: 100px;
  background-color: #eee;
}
.content {
  height: 2000px;
}
</style>
Salin selepas log masuk

Dalam coretan kod di atas, kami menggunakan nama kelas fixed untuk mengawal kedudukan tetap elemen siling dan menetapkan beberapa gaya CSS mudah.

Kesimpulan

Sangat mudah untuk melaksanakan kesan siling dalam Vue Anda hanya perlu mendengar acara tatal halaman, mengira hubungan kedudukan dan menetapkan gaya. Sama ada dalam kerja sebenar atau dalam proses mempraktikkan pengetahuan Vue, kesan siling adalah teknik yang sangat berguna. Saya harap artikel ini dapat membantu semua orang.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan siling dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan