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:
isFixed
. data() { return { isFixed: false } },
mounted
, tambahkan pendengar acara tatal halaman. mounted() { window.addEventListener('scroll', this.handleScroll) },
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 } } },
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.
class
elemen siling, ikat nama kelas fixed
secara dinamik Kemunculan nama kelas bergantung pada nilai pembolehubah isFixed
. <div ref="test" :class="{fixed: isFixed}"> // 吸顶元素的内容 </div>
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>
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!