Role até o topo no Vue com componentes reutilizáveis

Ao melhorar a experiência do usuário em qualquer site com muito conteúdo em suas páginas, é comum que os desenvolvedores frontend implementem uma funcionalidade scroll-to-top por meio de um botão, para tornar as coisas mais agradáveis ​​e convenientes para os usuários.

Embora os usuários possam usar o comando + seta para cima no teclado, também é importante ter em mente que potencialmente mais da metade dos seus usuários podem estar usando dispositivos móveis e não usarão um teclado conectado ao telefone enquanto navegam pelo seu site. Muitas vezes, telas menores também exigem mais rolagem, tornando a navegação de baixo para cima trabalhosa.

Neste guia, implementaremos um botão de rolagem para cima usando Vue 3 – passo a passo. Juntamente com o componente reutilizável, construiremos um aplicativo de notícias que fornece as últimas notícias de várias fontes com o API de notícias.

Configuração do Projeto

Começar com a estrutura Vue.JS é simples, como incluir um arquivo JavaScript em um arquivo HTML. Mas para uma aplicação no mundo real e em larga escala, o vue-cli é a melhor maneira de começar! Usaremos o vue-cli em nosso tutorial de hoje.

Vamos criar o projeto e nomeá-lo vue-scroll-to-top, usando o comando abaixo:

$ vue create vue-scroll-to-top

Isso cria um modelo para começar a construir nosso projeto. Você pode iniciar o aplicativo entrando no projeto:

$ cd vue-scroll-to-top

E serve com Yarn ou NPM:

$ yarn serve

Ou:

$ npm run serve

On localhost, no porto 8080 – sua inscrição será atendida:

Construindo os Componentes

Com o modelo criado – podemos começar a construir o componente reutilizável de rolagem para o topo, que se generaliza para qualquer aplicativo que você queira construir. Antes de definir o componente, vamos preparar e limpar o App.vue starter que criamos com Vue CLI.

Limpando o Projeto Vue

Debaixo src/App.vue, registraremos o componente que será lançado em breve como 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>

Construindo a IU do botão

Com a página que exibirá o botão (e as notícias) – podemos começar a construir os componentes. Vamos começar com o botão!

No components pasta, crie um AppButton.vue arquivo. No botão, incluiremos um ícone que significa o seta para cima para transmitir visualmente a funcionalidade. Para o ícone em si, usaremos uma biblioteca de ícones chamada Font Incríveis que tem mais de 19.000 ícones em 6 estilos e marcas, embora possa ser substituído por um simples sinal de circunflexo (^), um ícone personalizado ou um ícone de outras bibliotecas se você não quiser introduzir outra dependência.

Usando seu gerenciador de dependências preferido, instale o pacote principal que contém todos os utilitários para fazer os ícones funcionarem:

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

A seguir, instalaremos o ícones SVG sólidos gratuitos (um dos vários “conjuntos” ou estilos disponíveis), usando o seguinte comando:

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

E por último, instalaremos o Componente Vue impressionante da fonte para Vue 3, usando o seguinte comando:

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

Antes de podermos renderizar nosso ícone em nosso botão, precisamos importar as dependências instaladas do Font Awesome para nosso projeto, incluindo o nome específico do ícone que queremos usar. Vamos atualizar o main.js arquivo:

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

Agora podemos chamar o ícone de seta para cima, como faArrowUpem AppButton.vue para renderizá-lo na UI! Também podemos estilizar o botão a partir do arquivo do componente:

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

No DOM, nosso botão de rolagem para cima deve ficar assim, quando você abre seu aplicativo em localhost:8080:

Construindo a IU do Feed de Notícias

Para criar um ambiente no qual um usuário possa querer usar o botão, em vez de rolar manualmente – vamos buscar muito conteúdo de notícias da API gratuita de notícias. Para fazer solicitações de busca, aproveitaremos o axios pacote.

Se ainda não o instalou, você pode fazê-lo via Yarn ou NPM:

$ yarn add axios
# Or
$ npm install axios

Para usar a API de notícias, você precisará registrar um conta – para obter uma chave API gratuita para ambientes de desenvolvimento. Para esta demonstração, manteremos as coisas simples, apenas buscando todos os artigos sobre, digamos, Bitcoin. No components pasta, vamos criar um novo arquivo chamado NewsList.vue. em NewsList.vue, criaremos uma lista de artigos de notícias sobre Bitcoin que receberíamos como resposta da API.

NewsList.vue agora deve incluir os seguintes códigos:

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

Então, nos certificamos de atualizar App.vue, para que a lista de artigos de notícias possa ser exibida:

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

Normalmente – você deseja paginar os resultados, em vez de acumulá-los. No entanto, estamos criando especificamente um caso em que rolar para cima é útil.

Mostrar/ocultar o botão Rolar para cima usando o Scroll Listener

Como parte de uma experiência envolvente para o usuário, vamos garantir que o botão de rolagem para cima seja revelado apenas quando o usuário começar a rolar a página para baixo.

Para conseguir isso, temos que ouvir o evento scroll no momento em que o usuário rola a página para baixo.

Primeiro, vamos direcionar o elemento do botão definindo uma referência para ele. Então, fazemos uso do beforeUnmount() ganchos de ciclo de vida para adicionar e remover o botão do DOM, com a ajuda do ouvinte de rolagem - ao rolar a página para baixo ou para o topo da página. Também podemos verificar se um usuário está no topo da página se window.scrollY é maior que 0. Com isso podemos alternar a visibilidade do botão, onde for necessário.

Vamos atualizar o AppButton.vue componente para exibir ou ocultar o botão com base na distância que o usuário rolou:

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

Implementando evento de rolagem

O que nos resta neste momento é fazer com que o botão realmente role até o topo da página quando um usuário clicar nele. Para conseguir isso, vamos criar um scrollToTop() método em AppButton.vue. Este é um método que invocaríamos quando window.scrollY = 0. Agora, quando o scrollToTop() é chamado, nossa página rola suavemente para a parte superior e o botão scroll-top-top também desaparece:

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

Quando este trecho de código é adicionado a AppButton.vue, você descobrirá que implementamos com sucesso uma funcionalidade de rolagem para cima em nosso aplicativo Vue que podemos conectar a qualquer projeto onde precisarmos dela.

Conclusão

Parabéns por acompanhar até o final! 🔥

Neste tutorial, vimos como construir uma funcionalidade scroll-to-top em um aplicativo Vue. Este é um componente genérico reutilizável e também pode ser facilmente introduzido em outros projetos.

Recursos Relevantes