Прокрутіть до початку Vue з багаторазовими компонентами PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.

Перейдіть до верхньої частини у Vue із багаторазовими компонентами

Мітка часу: 12 жовтня 2022 р., 6:30

Щоб покращити взаємодію з користувачем на будь-якому веб-сайті з великою кількістю вмісту на його веб-сторінках, розробники інтерфейсу зазвичай впроваджують функцію прокручування вгору за допомогою кнопки, щоб зробити речі приємнішими та зручнішими для користувачів.

Хоча користувачі можуть використовувати команду + стрілка вгору на клавіатурі, також важливо мати на увазі, що потенційно більше половини ваших користувачів можуть використовувати мобільні пристрої та не використовуватимуть клавіатуру, підключену до свого телефону, під час прокручування вашого веб-сайту. Менші екрани також часто вимагають більше прокручування, що робить навігацію знизу вгору трудомісткою.

У цьому посібнику ми крок за кроком реалізуємо кнопку прокручування вгору за допомогою Vue 3. Окрім компонента для багаторазового використання, ми створимо програму новин, яка надаватиме свіжі новини з різних джерел за допомогою API новин.

Вихідний код: Як зазвичай, ви можете повозитися з вихідним кодом, розміщеним на GitHub.

Налаштування проекту

Почати роботу з фреймворком 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 – вашу заявку буде обслуговано:

Прокрутіть до початку Vue з багаторазовими компонентами PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.

Створення компонентів

Завдяки створенню шаблону ми можемо почати створювати багаторазовий компонент прокручування вгору, який узагальнює будь-яку програму, яку ви хочете створити. Перш ніж визначити компонент, давайте підготуємо та очистимо його App.vue starter, який ми створили за допомогою 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>

Створення інтерфейсу користувача кнопки

Зі сторінки, на якій відображатиметься кнопка (і новини), ми можемо почати створювати компоненти. Почнемо з кнопки!

У components папку, створіть AppButton.vue файл. До кнопки ми додамо піктограму, яка позначає стрілка вгору візуально передати функціональність. Для самого значка ми будемо використовувати бібліотеку значків під назвою Шрифт Високий який містить понад 19.000 6 значків у XNUMX стилях і брендах, хоча це можна замінити простим знаком вставки (^), спеціальну піктограму або піктограму з інших бібліотек, якщо ви не хочете вводити іншу залежність.

Використовуючи бажаний диспетчер залежностей, інсталюйте основний пакет, який містить усі утиліти для роботи піктограм:

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

Далі ми встановимо безкоштовні суцільні іконки SVG (один із кількох доступних «наборів» або стилів), використовуючи таку команду:

Ознайомтеся з нашим практичним практичним посібником із вивчення Git з передовими методами, прийнятими в галузі стандартами та включеною шпаргалкою. Припиніть гуглити команди Git і фактично вчитися це!

$ 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 щоб відобразити його в інтерфейсі користувача! Ми також можемо стилізувати кнопку з компонентного файлу:

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

зображення

Створення інтерфейсу користувача каналів новин

Щоб створити середовище, у якому користувач може захотіти використовувати кнопку, а не прокручувати вручну, давайте отримаємо багато вмісту новин із безкоштовного News API. Для створення запитів на вибірку ми скористаємося перевагами axios пакет.

Якщо у вас його ще не встановлено, ви можете зробити це через Yarn або NPM:

$ yarn add axios
# Or
$ npm install axios

Щоб використовувати News API, потрібно зареєструватися рахунок – отримати ключ API, який є безкоштовним для середовищ розробки. Для цієї демонстрації ми зробимо все просто, просто завантажуючи всі статті про, скажімо, біткойн. В components папку, давайте створимо новий файл під назвою NewsList.vue, в NewsList.vue, ми створимо список статей про біткойн, які отримаємо у відповідь від 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>

Реалізація події Scroll

На даний момент нам залишається зробити так, щоб кнопка фактично прокручувалася до верхньої частини сторінки, коли користувач натискає її. Щоб досягти цього, давайте створимо a scrollToTop() метод в AppButton.vue. Це метод, який ми будемо викликати, коли window.scrollY = 0. Тепер, коли scrollToTop() викликається метод, наша сторінка плавно прокручується до самої верхньої частини, а кнопка прокручування зверху зверху також зникає:


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

Коли додається цей фрагмент коду AppButton.vue, ви побачите, що ми успішно реалізували функцію прокручування вгору в нашій програмі Vue, яку ми можемо підключити до будь-якого проекту, де нам це потрібно.

Висновок

Вітаємо з тим, що продовжили до кінця! 🔥

У цьому підручнику ми розглянули, як створити функцію прокручування вгору в програму Vue. Це загальний компонент для багаторазового використання, який також можна легко використовувати в інших проектах.

Відповідні ресурси

Часова мітка:

Більше від Stackabuse