Dalam meningkatkan pengalaman pengguna di situs web apa pun dengan banyak konten di halaman webnya, pengembang frontend biasanya menerapkan fungsi gulir ke atas melalui tombol, untuk membuat segalanya lebih menyenangkan dan nyaman bagi pengguna.
Meskipun pengguna dapat menggunakan perintah + panah atas pada keyboard, penting juga untuk diingat bahwa kemungkinan lebih dari setengah pengguna Anda mungkin menggunakan perangkat seluler dan tidak akan menggunakan keyboard yang terhubung ke ponsel mereka saat menggulir situs web Anda. Layar yang lebih kecil seringkali juga memerlukan lebih banyak pengguliran, membuat navigasi dari bawah ke atas sulit.
Dalam panduan ini, kami akan menerapkan tombol gulir ke atas menggunakan Vue 3 – langkah demi langkah. Di samping komponen yang dapat digunakan kembali, kami akan membangun aplikasi berita yang menyediakan berita terkini dari berbagai sumber dengan API Berita.
Kode sumber: Seperti biasa, Anda dapat mengotak-atik kode sumber yang dihosting di GitHub.
Pengaturan Proyek
Memulai dengan kerangka kerja Vue.JS sederhana seperti memasukkan file JavaScript dalam file HTML. Tetapi untuk aplikasi dunia nyata dan skala besar, vue-cli adalah cara terbaik untuk memulai! Kami akan menggunakan vue-cli dalam tutorial kami hari ini.
Mari buat proyek dan beri nama vue-scroll-to-top, dengan menggunakan perintah di bawah ini:
$ vue create vue-scroll-to-top
Ini membuat template untuk mulai membangun proyek kita. Anda dapat memulai aplikasi dengan pindah ke proyek:
$ cd vue-scroll-to-top
Dan serve dengan Benang atau NPM:
$ yarn serve
Atau:
$ npm run serve
On localhost, di pelabuhan 8080 – aplikasi Anda akan dilayani:
Membangun Komponen
Dengan template berputar – kita dapat mulai membangun komponen scroll-to-top yang dapat digunakan kembali, yang digeneralisasi ke aplikasi apa pun yang ingin Anda buat. Sebelum mendefinisikan komponen, mari kita siapkan dan bersihkan App.vue starter yang telah kita buat dengan Vue CLI.
Membersihkan Proyek Vue
Bawah src/App.vue, kami akan mendaftarkan komponen yang akan segera hadir sebagai AppButton:
<template>
<section class="app-container">
<AppButton />
</section>
</template>
<script>
import AppButton from "./components/AppButton.vue";
export default {
name: "App",
components: {
AppButton
},
setup() {
return {};
}
};
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: inherit;
}
html {
font-family: "Nunito", sans-serif;
}
body {
font-size: 15px;
color: #000000;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000000;
}
img {
max-width: 100%;
}
ul {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
}
.app-container {
max-width: 82rem;
margin: auto;
padding: 3rem 1rem;
}
</style>
Membangun UI Tombol
Dengan halaman yang akan menampilkan tombol (dan berita) – kita dapat mulai membangun komponen. Mari kita mulai dengan tombolnya!
Dalam majalah components folder, buat AppButton.vue mengajukan. Di tombol, kami akan menyertakan ikon yang menandakan panah atas untuk menyampaikan fungsionalitas secara visual. Untuk ikon itu sendiri, kami akan menggunakan pustaka ikon yang disebut Font Keren yang memiliki lebih dari 19.000 ikon lebih dari 6 gaya dan merek, meskipun ini dapat diganti dengan tanda sisipan sederhana (^), ikon khusus atau ikon dari perpustakaan lain jika Anda tidak ingin memperkenalkan ketergantungan lain.
Menggunakan manajer ketergantungan pilihan Anda, instal paket inti yang berisi semua utilitas untuk membuat ikon berfungsi:
$ yarn add @fortawesome/fontawesome-svg-core
# Or
$ npm i --save @fortawesome/fontawesome-svg-core
Selanjutnya, kita akan menginstal ikon SVG padat gratis (salah satu dari beberapa "set" atau gaya yang tersedia), menggunakan perintah berikut:
Lihat panduan praktis dan praktis kami untuk mempelajari Git, dengan praktik terbaik, standar yang diterima industri, dan termasuk lembar contekan. Hentikan perintah Googling Git dan sebenarnya belajar itu!
$ yarn add @fortawesome/free-solid-svg-icons
# Or
$ npm i --save @fortawesome/free-solid-svg-icons
Dan terakhir, kita akan menginstal Komponen Vue yang Mengagumkan Font untuk Vue 3, gunakan perintah berikut:
$ yarn add @fortawesome/[email protected]
# Or
$ npm i --save @fortawesome/[email protected]
Sebelum kita dapat merender ikon kita di tombol kita, kita perlu mengimpor dependensi Font Awesome yang terinstal ke dalam proyek kita, termasuk nama ikon spesifik yang ingin kita gunakan. Ayo perbarui main.js File:
import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
library.add(faArrowUp)
createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
Kita sekarang dapat memanggil ikon panah ke atas, sebagai faArrowUpdi AppButton.vue untuk merendernya di UI! Kami juga dapat menata tombol dari file komponen:
<template>
<button class="app-button">
<font-awesome-icon icon="fa-solid fa-arrow-up" />
</button>
</template>
<style scoped>
.app-button {
border-radius: 50%;
height: 50px;
width: 50px;
padding: 4px;
box-shadow: 2px 2px #e9e9e9;
cursor: pointer;
position: fixed;
right: 40px;
bottom: 40px;
}
</style>
Di DOM, tombol gulir ke atas kami akan terlihat seperti ini, saat Anda membuka aplikasi di localhost:8080:
Membangun UI Umpan Berita
Untuk membuat lingkungan di mana pengguna mungkin ingin menggunakan tombol, daripada menggulir secara manual – mari ambil banyak konten berita dari News API gratis. Untuk membuat permintaan pengambilan, kami akan memanfaatkan axios paket.
Jika Anda belum menginstalnya, Anda dapat melakukannya melalui Yarn atau NPM:
$ yarn add axios
# Or
$ npm install axios
Untuk menggunakan News API, Anda harus mendaftar dan rekening – untuk mendapatkan kunci API yang gratis untuk lingkungan pengembangan. Untuk demo ini, kami akan menjaga semuanya tetap sederhana, dengan hanya mengambil semua artikel tentang, katakanlah, Bitcoin. Dalam components folder, mari buat file baru bernama NewsList.vue. di NewsList.vue, kami akan membuat daftar artikel berita Bitcoin yang akan kami dapatkan sebagai tanggapan dari API.
NewsList.vue sekarang harus menyertakan kode berikut:
<template>
<section>
<ul class="news-list">
<li class="news-card" v-for="newsItem in newsList" :key="newsItem.id">
<p><span class="heading">Title</span>: {{ newsItem.title }}</p>
<p><span class="heading">Author</span>: {{ newsItem.author }}</p>
<p>
<span class="heading">Description</span>: {{ newsItem.description }}
</p>
<p><span class="heading">Source</span>: {{ newsItem.source.name }}</p>
</li>
</ul>
</section>
</template>
<script>
import axios from "axios";
import { onMounted, ref } from "vue";
export default {
name: "NewsList",
setup() {
const newsList = ref([]);
const fetchNews = () => {
axios
.get(
"https://newsapi.org/v2/everything?q=bitcoin&apiKey=94585b39692e4ea6b372bea15abf7dcc"
)
.then((response) => (newsList.value = response.data.articles));
};
onMounted(() => {
fetchNews();
});
return { newsList };
},
};
</script>
<style scoped>
ul.news-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
ul li.news-card {
padding: 10px;
display: flex;
border-radius: 8px;
flex-direction: column;
row-gap: 5px;
box-shadow: 0px 4px 12px -1px rgba(120,116,120,0.79);
}
li p span.heading {
font-weight: 600;
font-size: 18;
}
</style>
Kemudian, kami pastikan untuk memperbarui App.vue, sehingga daftar artikel berita dapat ditampilkan:
<template>
<section class="app-container">
<AppButton />
<NewsList />
</section>
</template>
<script>
import AppButton from "./components/AppButton.vue";
import NewsList from "./components/NewsList.vue";
export default {
name: "App",
components: {
AppButton,
NewsList,
},
setup() {
return{}
}
};
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: inherit;
}
html {
font-family: "Nunito", sans-serif;
}
body {
font-size: 15px;
color: #000000;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000000;
}
img {
max-width: 100%;
}
ul {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
}
.app-container {
max-width: 82rem;
margin: auto;
padding: 3rem 1rem;
}
</style>
Biasanya – Anda ingin membuat paginasi hasil, daripada menumpuknya. Namun, kami secara khusus membuat kasus di mana scroll-to-top berguna.
Tampilkan/Sembunyikan Tombol Gulir ke Atas Menggunakan Pendengar Gulir
Sebagai bagian dari pengalaman yang menarik bagi pengguna, mari pastikan bahwa tombol gulir ke atas hanya ditampilkan saat pengguna mulai menggulir halaman ke bawah.
Untuk mencapai ini, kita harus mendengarkan acara gulir pada titik pengguna menggulir ke bawah halaman.
Pertama, mari kita targetkan elemen tombol dengan mengatur referensinya. Kemudian, kami menggunakan beforeUnmount() kait siklus hidup untuk menambah dan menghapus tombol dari DOM, dengan bantuan pendengar gulir – saat menggulir halaman ke bawah atau ke bagian atas halaman. Kami juga dapat memeriksa apakah pengguna berada di bagian atas halaman jika window.scrollY lebih besar dari 0. Dengan ini, kita dapat mengaktifkan visibilitas tombol, di mana perlu.
Mari perbarui AppButton.vue komponen untuk menampilkan atau menyembunyikan tombol berdasarkan seberapa jauh pengguna telah menggulir:
<template>
<button ref="appButton" class="app-button">
<font-awesome-icon icon="fa-solid fa-arrow-up" />
</button>
</template>
<script>
import { onMounted, ref, onBeforeMount } from "vue";
export default {
name: "AppButton",
setup() {
const appButton = ref();
const userScroll = () => {
if (window.scrollY > 0) {
appButton.value.classList.add("showButton");
console.log('scrolled');
} else {
appButton.value.classList.remove("showButton");
console.log('top');
}
};
onMounted(() => {
window.addEventListener("scroll", userScroll);
});
onBeforeMount(() => {
window.removeEventListener("scroll", userScroll);
});
return { appButton };
},
};
</script>
<style scoped>
.app-button {
border-radius: 50%;
height: 50px;
width: 50px;
padding: 4px;
box-shadow: 2px 2px #e9e9e9;
cursor: pointer;
position: fixed;
bottom: 40px;
display: none;
right: 40px;
}
.showButton {
display: block;
}
</style>
Menerapkan Acara Gulir
Apa yang tersisa bagi kita saat ini adalah membuat tombol benar-benar menggulir ke bagian atas halaman ketika pengguna mengkliknya. Untuk mencapai ini, mari kita buat scrollToTop() metode dalam AppButton.vue. Ini adalah metode yang akan kita panggil ketika window.scrollY = 0. Sekarang, ketika scrollToTop() metode ini dipanggil, halaman kami dengan lancar menggulir ke bagian paling atas, dan tombol gulir-atas-atas juga menghilang:
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
Ketika potongan kode ini ditambahkan ke AppButton.vue, Anda akan menemukan bahwa kami telah berhasil menerapkan fungsionalitas scroll-to-top di aplikasi Vue kami yang dapat kami sambungkan ke proyek mana pun yang membutuhkan hal yang sama.
Kesimpulan
Selamat mengikuti sampai akhir!
Dalam tutorial ini, kita melihat bagaimana membangun fungsionalitas scroll-to-top ke dalam aplikasi Vue. Ini adalah komponen generik yang dapat digunakan kembali dan dapat dengan mudah diperkenalkan di proyek lain juga.
