เลื่อนไปที่ด้านบนสุดใน Vue พร้อมส่วนประกอบที่นำกลับมาใช้ใหม่ได้

ในการปรับปรุงประสบการณ์ของผู้ใช้บนเว็บไซต์ใดๆ ที่มีเนื้อหาจำนวนมากบนหน้าเว็บนั้น เป็นเรื่องปกติที่นักพัฒนาส่วนหน้าจะใช้ฟังก์ชันเลื่อนไปด้านบนผ่านปุ่ม เพื่อทำให้ผู้ใช้เพลิดเพลินและสะดวกยิ่งขึ้น

แม้ว่าผู้ใช้สามารถใช้คำสั่ง + ลูกศรขึ้นบนแป้นพิมพ์ได้ สิ่งสำคัญคือต้องคำนึงถึงสิ่งนั้นด้วย มากกว่าครึ่งหนึ่งของผู้ใช้ของคุณ อาจกำลังใช้อุปกรณ์เคลื่อนที่และจะไม่ใช้แป้นพิมพ์ที่เชื่อมต่อกับโทรศัพท์ขณะเลื่อนดูเว็บไซต์ของคุณ บ่อยครั้งที่หน้าจอขนาดเล็กจำเป็นต้องเลื่อนมากขึ้น ทำให้การนำทางจากล่างขึ้นบนลำบาก

ในคำแนะนำนี้ เราจะใช้ปุ่มเลื่อนขึ้นด้านบนโดยใช้ Vue 3 – ทีละขั้นตอน นอกเหนือจากองค์ประกอบที่ใช้ซ้ำได้ เราจะสร้างแอปข่าวที่ให้ข่าวด่วนจากแหล่งต่างๆ ด้วย ข่าว API.

ตั้งค่าโครงการ

การเริ่มต้นใช้งานเฟรมเวิร์ก Vue.JS ทำได้ง่ายเพียงแค่รวมไฟล์ JavaScript ไว้ในไฟล์ HTML แต่สำหรับแอปพลิเคชันขนาดใหญ่ในโลกแห่งความเป็นจริง vue-cli เป็นวิธีที่ดีที่สุดในการเริ่มต้น! เราจะใช้ vue-cli ในการกวดวิชาของเราวันนี้

มาสร้างโครงการและตั้งชื่อ vue-scroll-to-topโดยใช้คำสั่งด้านล่าง:

$ vue create vue-scroll-to-top

สิ่งนี้สร้างเทมเพลตเพื่อเริ่มสร้างโครงการของเรา คุณสามารถเริ่มแอปพลิเคชันได้โดยย้ายเข้าสู่โครงการ:

$ cd vue-scroll-to-top

และ serve ด้วย Yarn หรือ NPM:

$ yarn serve

หรือ:

$ npm run serve

On localhost, ที่ท่าเรือ 8080 – ใบสมัครของคุณจะให้บริการ:

การสร้างส่วนประกอบ

เมื่อเทมเพลตหมุนขึ้น เราสามารถเริ่มสร้างคอมโพเนนต์ scroll-to-top ที่นำมาใช้ซ้ำได้ ซึ่งจะนำไปใช้กับแอปใดๆ ที่คุณต้องการสร้าง ก่อนที่จะกำหนดองค์ประกอบเรามาเตรียมและทำความสะอาด App.vue โปรแกรมเริ่มต้นที่เราสร้างขึ้นด้วย Vue CLI

ทำความสะอาดโครงการ Vue

ภายใต้ src/App.vueเราจะลงทะเบียนคอมโพเนนต์ที่กำลังจะเป็นเร็วๆ นี้ 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>

สร้างปุ่ม UI

ด้วยหน้าที่จะแสดงปุ่ม (และข่าว) เราสามารถเริ่มสร้างส่วนประกอบได้ เริ่มจากปุ่มกันเถอะ!

ตัว Vortex Indicator ได้ถูกนำเสนอลงในนิตยสาร components โฟลเดอร์ สร้าง AppButton.vue ไฟล์. ในปุ่ม เราจะรวมไอคอนที่บ่งบอกถึง ลูกศรขึ้น เพื่อสื่อให้เห็นถึงการทำงาน สำหรับตัวไอคอนนั้น เราจะใช้ไลบรารี่ของไอคอนที่เรียกว่า ตัวอักษรที่น่ากลัว ซึ่งมีไอคอนมากกว่า 19.000 ไอคอนใน 6 สไตล์และแบรนด์ แต่สามารถใช้เครื่องหมายคาเร็ตธรรมดาแทนได้ (^) ไอคอนแบบกำหนดเองหรือไอคอนจากไลบรารีอื่น หากคุณไม่ต้องการแนะนำการอ้างอิงอื่น

ใช้ตัวจัดการการพึ่งพาที่คุณต้องการติดตั้งแพ็คเกจหลักที่มียูทิลิตี้ทั้งหมดเพื่อให้ไอคอนทำงานได้:

$ yarn add @fortawesome/fontawesome-svg-core
# Or
$ npm i --save @fortawesome/fontawesome-svg-core

ต่อไปเราจะติดตั้ง ฟรีไอคอน SVG ที่เป็นของแข็ง (หนึ่งใน "ชุด" หรือสไตล์ที่มีอยู่มากมาย) โดยใช้คำสั่งต่อไปนี้:

$ yarn add @fortawesome/free-solid-svg-icons
# Or
$ npm i --save @fortawesome/free-solid-svg-icons

และสุดท้าย เราจะติดตั้ง ส่วนประกอบ Font Awesome Vue สำหรับ Vue 3 โดยใช้คำสั่งต่อไปนี้:

$ yarn add @fortawesome/[email protected]
# Or
$ npm i --save @fortawesome/[email protected]

ก่อนที่เราจะแสดงไอคอนของเราในปุ่มของเรา เราต้องนำเข้าการพึ่งพา Font Awesome ที่ติดตั้งไว้ในโครงการของเรา รวมถึงชื่อไอคอนเฉพาะที่เราต้องการใช้ มาอัพเดทของ main.js ไฟล์:

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')

ตอนนี้เราสามารถเรียกไอคอนลูกศรขึ้นว่า faArrowUpใน AppButton.vue เพื่อแสดงผลใน UI! นอกจากนี้เรายังสามารถจัดรูปแบบปุ่มจากไฟล์ส่วนประกอบได้:

<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>

ใน DOM ปุ่มเลื่อนขึ้นด้านบนควรมีลักษณะดังนี้ เมื่อคุณเปิดแอปพลิเคชัน localhost:8080:

การสร้าง UI ฟีดข่าว

หากต้องการสร้างสภาพแวดล้อมที่ผู้ใช้อาจต้องการใช้ปุ่มแทนการเลื่อนด้วยตนเอง ลองดึงเนื้อหาข่าวจำนวนมากจาก News API ฟรี สำหรับการดึงข้อมูลคำขอ เราจะใช้ประโยชน์จาก axios บรรจุภัณฑ์

หากคุณยังไม่ได้ติดตั้ง คุณสามารถทำได้ผ่าน Yarn หรือ NPM:

$ yarn add axios
# Or
$ npm install axios

หากต้องการใช้ News API คุณจะต้องลงทะเบียนและ บัญชี – เพื่อรับคีย์ API ที่ฟรีสำหรับสภาพแวดล้อมการพัฒนา สำหรับการสาธิตนี้ เราจะทำให้ทุกอย่างง่ายขึ้นโดยเพียงแค่ดึงบทความทั้งหมดเกี่ยวกับ เช่น Bitcoin ใน components โฟลเดอร์มาสร้างไฟล์ใหม่ชื่อ NewsList.vue. ใน NewsList.vueเราจะสร้างรายชื่อบทความข่าว Bitcoin ซึ่งเราจะได้รับคำตอบจาก API

NewsList.vue ตอนนี้ควรมีรหัสต่อไปนี้:

<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>

จากนั้นเราจะอัปเดต App.vueเพื่อให้สามารถแสดงรายการบทความข่าวได้:

<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>

โดยปกติแล้ว คุณต้องการแบ่งหน้าผลลัพธ์ แทนที่จะปล่อยให้กองพะเนิน อย่างไรก็ตาม เรากำลังสร้างกรณีที่การเลื่อนขึ้นด้านบนมีประโยชน์โดยเฉพาะ

แสดง/ซ่อนปุ่มเลื่อนไปที่ด้านบนโดยใช้ตัวฟังเลื่อน

เพื่อเป็นส่วนหนึ่งของประสบการณ์ที่น่าดึงดูดใจสำหรับผู้ใช้ เรามาตรวจสอบให้แน่ใจว่าปุ่มเลื่อนไปด้านบนปรากฏเฉพาะเมื่อผู้ใช้เริ่มเลื่อนหน้าลงเท่านั้น

เพื่อให้บรรลุเป้าหมายนี้ เราต้องฟังเหตุการณ์การเลื่อน ณ จุดที่ผู้ใช้เลื่อนหน้าลงมา

ขั้นแรก ให้กำหนดเป้าหมายองค์ประกอบปุ่มโดยตั้งค่าการอ้างอิง จากนั้นเราใช้ประโยชน์จาก beforeUnmount() ขอวงจรชีวิตเพื่อเพิ่มและลบปุ่มออกจาก DOM ด้วยความช่วยเหลือของตัวฟังการเลื่อน - เมื่อเลื่อนหน้าลงมาหรือไปที่ด้านบนสุดของหน้า เรายังสามารถตรวจสอบได้ว่าผู้ใช้อยู่ที่ด้านบนสุดของหน้าหรือไม่ ถ้า window.scrollY มีค่ามากกว่า 0 ด้วยวิธีนี้ เราสามารถสลับการแสดงปุ่มได้ตามต้องการ

มาอัปเดต AppButton.vue คอมโพเนนต์เพื่อแสดงหรือซ่อนปุ่มตามระยะที่ผู้ใช้เลื่อน:

<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>

การใช้เหตุการณ์เลื่อน

สิ่งที่เหลืออยู่สำหรับเรา ณ จุดนี้คือการทำให้ปุ่มเลื่อนไปที่ด้านบนของหน้าจริง ๆ เมื่อผู้ใช้คลิก เพื่อให้บรรลุเป้าหมายนี้ มาสร้าง scrollToTop() วิธีการใน AppButton.vue. นี่เป็นวิธีการที่เราจะเรียกใช้เมื่อ window.scrollY = 0. ทีนี้ เมื่อ scrollToTop() เรียกว่าเมธอด หน้าของเราเลื่อนไปที่ส่วนบนสุดได้อย่างราบรื่น และปุ่มเลื่อนบนสุดจะหายไปด้วย:

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};

เมื่อมีการเพิ่มข้อมูลโค้ดนี้ AppButton.vueคุณจะพบว่าเราได้ใช้ฟังก์ชันแบบเลื่อนไปด้านบนสำเร็จในแอป Vue ของเรา ซึ่งเราสามารถเชื่อมต่อกับโปรเจ็กต์ใดก็ได้ที่เราต้องการเหมือนกัน

สรุป

ยินดีด้วยที่ติดตามมาจนถึงตอนจบ! 🔥

ในบทช่วยสอนนี้ เราดูวิธีสร้างฟังก์ชันแบบเลื่อนไปด้านบนในแอปพลิเคชัน Vue นี่เป็นส่วนประกอบทั่วไปที่ใช้ซ้ำได้ และสามารถนำไปใช้ในโครงการอื่นๆ ได้อย่างง่ายดายเช่นกัน

ทรัพยากรที่เกี่ยวข้อง