Улучшая взаимодействие с пользователем на любом веб-сайте с большим количеством контента на веб-страницах, разработчики внешнего интерфейса обычно реализуют функцию прокрутки вверх с помощью кнопки, чтобы сделать работу более приятной и удобной для пользователей.
Хотя пользователи могут использовать команду + стрелка вверх на клавиатуре, также важно помнить, что потенциально более половины ваших пользователей могут использовать мобильные устройства и не будут использовать клавиатуру, подключенную к их телефону, при прокрутке вашего веб-сайта. Меньшие экраны также часто требуют большей прокрутки, что делает навигацию снизу вверх трудоемкой.
В этом руководстве мы шаг за шагом реализуем кнопку прокрутки вверх с помощью 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 – ваша заявка будет обслужена:
Создание компонентов
Развернув шаблон, мы можем приступить к созданию повторно используемого компонента прокрутки вверх, который обобщает любое приложение, которое вы хотите создать. Перед определением компонента давайте подготовим и очистим 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:
Создание пользовательского интерфейса новостных лент
Чтобы создать среду, в которой пользователь может захотеть использовать кнопку, а не прокручивать вручную, давайте получим много новостного контента из бесплатного 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>
Реализация события прокрутки
На данный момент нам осталось сделать так, чтобы кнопка действительно прокручивалась вверх страницы, когда пользователь щелкает ее. Для этого создадим scrollToTop() метод в AppButton.vue. Это метод, который мы будем вызывать, когда window.scrollY = 0. Теперь, когда scrollToTop() вызывается метод, наша страница плавно прокручивается до самой верхней части, и кнопка scroll-top-top тоже исчезает:
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
Когда этот фрагмент кода добавляется в AppButton.vue, вы обнаружите, что мы успешно реализовали функцию прокрутки вверх в нашем приложении Vue, которую мы можем подключить к любому проекту, где нам это нужно.
Заключение
Поздравляю с продолжением до самого конца! 🔥
В этом руководстве мы рассмотрели, как встроить функцию прокрутки вверх в приложение Vue. Это универсальный компонент многократного использования, который можно легко внедрить и в другие проекты.
