Cuộn lên đầu trong Vue với các thành phần có thể tái sử dụng

Được xuất bản lại bởi Plato

Người theo dõi: 0

Để cải thiện trải nghiệm người dùng trên bất kỳ trang web nào có nhiều nội dung trên các trang web của nó, các nhà phát triển giao diện người dùng thường triển khai chức năng cuộn lên đầu thông qua một nút, để làm cho mọi thứ trở nên thú vị và thuận tiện hơn cho người dùng.

Mặc dù người dùng có thể sử dụng lệnh + mũi tên lên trên bàn phím, nhưng điều quan trọng cần lưu ý là có khả năng hơn một nửa số người dùng của bạn có thể đang sử dụng thiết bị di động và sẽ không sử dụng bàn phím được kết nối với điện thoại của họ khi cuộn qua trang web của bạn. Đôi khi, màn hình nhỏ hơn cũng yêu cầu nhiều thao tác cuộn hơn, khiến việc điều hướng từ dưới lên trên trở nên khó khăn hơn.

Trong hướng dẫn này, chúng tôi sẽ triển khai nút cuộn lên đầu bằng Vue 3 - từng bước. Bên cạnh thành phần có thể tái sử dụng, chúng tôi sẽ xây dựng một ứng dụng tin tức cung cấp tin tức nóng hổi từ nhiều nguồn khác nhau với API Tin tức.

Mã nguồn: Như thường lệ, bạn có thể sửa đổi mã nguồn được lưu trữ trên GitHub.

Thiết lập dự án

Bắt đầu với khung công tác Vue.JS đơn giản như bao gồm một tệp JavaScript trong một tệp HTML. Nhưng đối với một ứng dụng trong thế giới thực và quy mô lớn, vue-cli là cách tốt nhất để bắt đầu! Chúng tôi sẽ sử dụng vue-cli trong hướng dẫn của chúng tôi ngày hôm nay.

Hãy tạo dự án và đặt tên cho nó vue-scroll-to-top, sử dụng lệnh dưới đây:

$ vue create vue-scroll-to-top

Điều này tạo ra một mẫu để bắt đầu xây dựng dự án của chúng tôi. Bạn có thể bắt đầu ứng dụng bằng cách chuyển sang dự án:

$ cd vue-scroll-to-top

và serve nó với Yarn hoặc NPM:

$ yarn serve

Hoặc:

$ npm run serve

On localhost, tại cảng 8080 - đơn của bạn sẽ được phục vụ:

Cuộn lên trên cùng trong Vue với các thành phần có thể tái sử dụng Thông minh dữ liệu PlatoBlockchain. Tìm kiếm dọc. Ái.

Xây dựng các thành phần

Với việc xoay vòng mẫu - chúng tôi có thể bắt đầu xây dựng thành phần cuộn lên đầu có thể tái sử dụng, thành phần này tổng quát cho bất kỳ ứng dụng nào bạn muốn xây dựng. Trước khi xác định thành phần, hãy chuẩn bị trước và dọn dẹp App.vue khởi động mà chúng tôi đã tạo với Vue CLI.

Làm sạch dự án Vue

Theo src/App.vue, chúng tôi sẽ đăng ký thành phần sắp ra mắt dưới dạng 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>

Xây dựng giao diện người dùng nút

Với trang sẽ hiển thị nút (và tin tức) - chúng ta có thể bắt đầu xây dựng các thành phần. Hãy bắt đầu với nút!

Trong tạp chí components thư mục, tạo một AppButton.vue tập tin. Trong nút, chúng tôi sẽ bao gồm một biểu tượng biểu thị mũi tên lên để truyền đạt chức năng một cách trực quan. Đối với chính biểu tượng, chúng tôi sẽ sử dụng một thư viện biểu tượng có tên là Font Awesome có hơn 19.000 biểu tượng trên 6 kiểu và thương hiệu, mặc dù điều này có thể được thay thế bằng một dấu mũ đơn giản (^), một biểu tượng tùy chỉnh hoặc một biểu tượng từ các thư viện khác nếu bạn không muốn giới thiệu một phụ thuộc khác.

Sử dụng trình quản lý phụ thuộc ưa thích của bạn, cài đặt gói cốt lõi chứa tất cả các tiện ích để làm cho các biểu tượng hoạt động:

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

Tiếp theo, chúng tôi sẽ cài đặt biểu tượng SVG rắn miễn phí (một trong nhiều “bộ” hoặc kiểu có sẵn), sử dụng lệnh sau:

Xem hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, các tiêu chuẩn được ngành công nghiệp chấp nhận và bảng lừa đảo đi kèm. Dừng lệnh Googling Git và thực sự học nó!

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

Và cuối cùng, chúng tôi sẽ cài đặt Thành phần Font Awesome Vue cho Vue 3, sử dụng lệnh sau:

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

Trước khi có thể hiển thị biểu tượng trong nút của mình, chúng ta cần nhập các phần phụ thuộc vào Font Awesome đã cài đặt vào dự án của mình, bao gồm tên biểu tượng cụ thể mà chúng ta muốn sử dụng. Hãy cập nhật main.js tập tin:

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

Bây giờ chúng ta có thể gọi biểu tượng mũi tên lên, như faArrowUp, Trong AppButton.vue để hiển thị nó trong giao diện người dùng! Chúng tôi cũng có thể tạo kiểu cho nút từ tệp thành phần:

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

Trên DOM, nút cuộn lên đầu của chúng tôi sẽ trông giống như thế này, khi bạn mở ứng dụng của mình trên localhost:8080:

hình ảnh

Xây dựng giao diện người dùng News Feed

Để tạo một môi trường trong đó người dùng có thể muốn sử dụng nút, thay vì cuộn theo cách thủ công - hãy tìm nạp nhiều nội dung tin tức từ API Tin tức miễn phí. Để thực hiện các yêu cầu tìm nạp, chúng tôi sẽ tận dụng lợi thế của axios Gói.

Nếu bạn chưa cài đặt nó, bạn có thể làm như vậy qua Yarn hoặc NPM:

$ yarn add axios
# Or
$ npm install axios

Để sử dụng API Tin tức, bạn cần đăng ký Tài khoản - để có được khóa API miễn phí cho các môi trường phát triển. Đối với bản demo này, chúng tôi sẽ giữ mọi thứ đơn giản, bằng cách chỉ tìm nạp tất cả các bài báo về Bitcoin. bên trong components thư mục, hãy tạo một tệp mới có tên NewsList.vue. Trong NewsList.vue, chúng tôi sẽ xây dựng một danh sách các bài báo về Bitcoin mà chúng tôi sẽ nhận được dưới dạng phản hồi từ API.

NewsList.vue bây giờ nên bao gồm các mã sau:

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

Sau đó, chúng tôi đảm bảo cập nhật App.vue, để danh sách các bài báo có thể được hiển thị:

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

Thông thường - bạn muốn phân loại kết quả, thay vì để chúng chồng chất lên nhau. Tuy nhiên, chúng tôi đặc biệt tạo ra một trường hợp trong đó cuộn lên đầu rất hữu ích.

Hiển thị / Ẩn nút Cuộn lên đầu bằng Trình nghe cuộn

Là một phần của trải nghiệm hấp dẫn cho người dùng, hãy đảm bảo rằng nút cuộn lên trên chỉ được hiển thị khi người dùng bắt đầu cuộn xuống trang.

Để đạt được điều này, chúng ta phải lắng nghe sự kiện cuộn tại thời điểm người dùng cuộn xuống trang.

Đầu tiên, hãy nhắm mục tiêu phần tử nút bằng cách đặt tham chiếu cho nó. Sau đó, chúng tôi sử dụng beforeUnmount() vòng đời móc để thêm và xóa nút khỏi DOM, với sự trợ giúp của trình nghe cuộn - khi cuộn xuống trang hoặc lên trên cùng của trang. Chúng tôi cũng có thể kiểm tra xem người dùng có ở đầu trang hay không nếu window.scrollY lớn hơn 0. Với điều này, chúng tôi có thể chuyển đổi khả năng hiển thị của nút, nếu cần.

Hãy cập nhật AppButton.vue thành phần để hiển thị hoặc ẩn nút dựa trên mức độ người dùng đã cuộn:

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

Triển khai sự kiện cuộn

Điều còn lại đối với chúng tôi lúc này là làm cho nút thực sự cuộn lên đầu trang khi người dùng nhấp vào nó. Để đạt được điều này, hãy tạo scrollToTop() phương pháp trong AppButton.vue. Đây là một phương thức mà chúng tôi sẽ sử dụng khi window.scrollY = 0. Bây giờ, khi scrollToTop() phương thức được gọi, trang của chúng tôi cuộn trơn tru đến phần trên cùng và nút cuộn trên cùng cũng biến mất:


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

Khi đoạn mã này được thêm vào AppButton.vue, bạn sẽ thấy rằng chúng tôi đã triển khai thành công chức năng cuộn lên đầu trong ứng dụng Vue của chúng tôi mà chúng tôi có thể cắm vào bất kỳ dự án nào mà chúng tôi cần.

Kết luận

Chúc mừng bạn đã theo dõi cho đến cuối cùng! 🔥

Trong hướng dẫn này, chúng tôi đã xem xét cách xây dựng chức năng cuộn lên đầu vào ứng dụng Vue. Đây là một thành phần chung có thể tái sử dụng và cũng có thể dễ dàng được giới thiệu trong các dự án khác.