웹 페이지에 많은 콘텐츠가 있는 웹 사이트에서 사용자 경험을 개선할 때 프런트엔드 개발자는 버튼을 통해 맨 위로 스크롤 기능을 구현하여 사용자에게 더 즐겁고 편리하게 만드는 것이 일반적입니다.
사용자는 키보드에서 command + 위쪽 화살표를 사용할 수 있지만 잠재적으로 사용자의 절반 이상 모바일 장치를 사용 중일 수 있으며 웹사이트를 스크롤하는 동안 휴대폰에 연결된 키보드를 사용하지 않을 것입니다. 화면이 작을수록 종종 더 많은 스크롤이 필요하므로 아래에서 위로 탐색하기가 어렵습니다.
이 가이드에서는 단계별로 Vue 3을 사용하여 맨 위로 스크롤 버튼을 구현합니다. 재사용 가능한 구성 요소와 함께 다양한 소스의 속보를 제공하는 뉴스 앱을 만들 것입니다. 뉴스 API.
소스 코드 : 평소와 같이, 당신은 에 호스팅된 소스 코드를 만지작거릴 수 있습니다. GitHub의.
프로젝트 설정
Vue.JS 프레임워크를 시작하는 것은 HTML 파일에 JavaScript 파일을 포함하는 것처럼 간단합니다. 그러나 실제 대규모 응용 프로그램의 경우 vue-cli 시작하는 가장 좋은 방법입니다! 우리는 vue-cli 오늘 튜토리얼에서.
프로젝트를 만들고 이름을 지정합시다. vue-scroll-to-top, 아래 명령을 사용하여:
$ vue create vue-scroll-to-top
이렇게 하면 프로젝트 구축을 시작할 템플릿이 생성됩니다. 프로젝트로 이동하여 애플리케이션을 시작할 수 있습니다.
$ cd vue-scroll-to-top
Audiencegain과 serve Yarn 또는 NPM과 함께:
$ yarn serve
또는 :
$ npm run serve
On localhost, 항구에서 8080 – 귀하의 신청서는 다음과 같이 제공됩니다:
구성 요소 구축
템플릿이 가동되면 재사용 가능한 맨 위로 스크롤 구성 요소를 구축할 수 있습니다. 이 구성 요소는 구축하려는 모든 앱으로 일반화됩니다. 구성 요소를 정의하기 전에 미리 준비하고 정리합시다. App.vue Vue CLI로 만든 스타터.
Vue 프로젝트 청소
$XNUMX Million 미만 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 만들기
버튼(및 뉴스)을 표시할 페이지에서 구성 요소 구축을 시작할 수 있습니다. 버튼부터 시작하겠습니다!
. components 폴더, 생성 AppButton.vue 파일. 버튼에는 다음을 나타내는 아이콘이 포함됩니다. 위쪽 화살표 기능을 시각적으로 전달합니다. 아이콘 자체에는 다음과 같은 아이콘 라이브러리를 사용합니다. 멋진 글꼴 19.000가지 스타일과 브랜드에 걸쳐 6개 이상의 아이콘이 있지만 간단한 캐럿 기호(^), 사용자 지정 아이콘 또는 다른 종속성을 도입하지 않으려는 경우 다른 라이브러리의 아이콘입니다.
원하는 종속성 관리자를 사용하여 아이콘이 작동하도록 하는 모든 유틸리티가 포함된 핵심 패키지를 설치합니다.
$ 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 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 구축
사용자가 수동으로 스크롤하는 대신 버튼을 사용하려는 환경을 만들기 위해 무료 뉴스 API에서 많은 뉴스 콘텐츠를 가져옵니다. 가져오기 요청을 만들기 위해 다음을 활용합니다. axios 패키지.
아직 설치하지 않은 경우 Yarn 또는 NPM을 통해 설치할 수 있습니다.
$ yarn add axios
# Or
$ npm install axios
뉴스 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>
일반적으로 – 결과를 쌓아두는 대신 페이지를 매길 수 있습니다. 그러나 우리는 특별히 맨 위로 스크롤이 유용한 경우를 만들고 있습니다.
스크롤 리스너를 사용하여 맨 위로 스크롤 버튼 표시/숨기기
사용자를 위한 매력적인 경험의 일환으로 사용자가 페이지를 아래로 스크롤하기 시작할 때만 맨 위로 스크롤 버튼이 표시되도록 합시다.
이를 달성하려면 사용자가 페이지를 아래로 스크롤하는 지점에서 스크롤 이벤트를 수신해야 합니다.
먼저 ref를 설정하여 버튼 요소를 대상으로 지정하겠습니다. 그런 다음 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 애플리케이션에 맨 위로 스크롤 기능을 빌드하는 방법을 살펴보았습니다. 이것은 재사용 가능한 일반 구성 요소이며 다른 프로젝트에서도 쉽게 도입할 수 있습니다.
