Web ページに多くのコンテンツがある Web サイトでのユーザー エクスペリエンスを向上させるために、フロントエンド開発者がボタンを使用してスクロール ツー トップ機能を実装し、ユーザーにとって物事をより楽しく便利にするのが一般的です。
ユーザーはキーボードでコマンド + 上矢印を使用できますが、 ユーザーの半分以上 モバイル デバイスを使用している可能性があり、Web サイトをスクロールするときに携帯電話に接続されたキーボードを使用することはありません。 画面が小さいと、多くの場合、より多くのスクロールが必要になり、下から上へのナビゲーションが面倒になります。
このガイドでは、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
serve Yarn または NPM を使用します。
$ yarn serve
または：
$ npm run serve
On localhost、港で 8080 – あなたのアプリケーションが提供されます:
コンポーネントの構築
テンプレートが起動したら、再利用可能なスクロール トゥ トップ コンポーネントの構築を開始できます。これは、構築したいあらゆるアプリに一般化されます。 コンポーネントを定義する前に、準備してクリーンアップしましょう App.vue 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>
ボタン UI の構築
ボタン (およびニュース) を表示するページで、コンポーネントの構築を開始できます。 まずはボタンから！
components フォルダ、作成 AppButton.vue ファイル。 ボタンには、 上矢印 機能を視覚的に伝える。 アイコン自体には、 恐ろしいフォント 19.000 つのスタイルとブランドの 6 以上のアイコンがありますが、これは単純なキャレット記号 (^)、別の依存関係を導入したくない場合は、カスタム アイコンまたは他のライブラリのアイコン。
お好みの依存関係マネージャーを使用して、アイコンを機能させるためのすべてのユーティリティを含むコア パッケージをインストールします。
$ yarn add @fortawesome/fontawesome-svg-core
# Or
$ npm i --save @fortawesome/fontawesome-svg-core
次に、 フリーソリッドSVGアイコン (複数の利用可能な「セット」またはスタイルの XNUMX つ)、次のコマンドを使用します。
ベストプラクティス、業界で認められた標準、および含まれているチートシートを含む、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
News API を使用するには、 アカウント – 開発環境用の無料の API キーを取得する。 このデモでは、ビットコインなどに関するすべての記事を取得するだけで、物事をシンプルに保ちます。 の中に components フォルダ、という新しいファイルを作成しましょう NewsList.vue。 に NewsList.vue、API からの応答として取得する Bitcoin ニュース記事のリストを作成します。
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 アプリケーションに組み込む方法を見てきました。 これは再利用可能な汎用コンポーネントであり、他のプロジェクトにも簡単に導入できます。
