Vue.jsのライブラリvue-scroll-snapをインストールしてOne Page Scrollを実装する手順
- 作成日 2020.02.28
- 更新日 2020.07.21
- Vue.js
- vue-scroll-snap
vue.jsのライブラリで、One Page Scrollを実装できる「vue-scroll-snap」の導入手順と簡単な使い方
環境
- OS CentOS 8.0.1905 (Core)
- node v12.13.1
- npm 6.13.2
- @vue/cli 4.1.1
Vue環境構築
下記のコマンドで構築。今回は、vueappという名前でプロジェクトを作成してます。
vue create vueapp
プロジェクト作成時は、defaultを選択してます 。
Vue CLI v4.1.1? Please pick a preset: default (babel, eslint)
vue-scroll-snapインストール
下記の手順でインストールします。
## 移動
cd vueapp
## インストール
vue i -S vue-scroll-snap
vue-scroll-snap使い方
src配下のApp.vueを下記のように編集します。
<template>
<div id="app">
<vue-scroll-snap :fullscreen="true">
<div id="test1" class="item"></div>
<div id="test2" class="item"></div>
</vue-scroll-snap>
</div>
</template>
<script>
import VueScrollSnap from "vue-scroll-snap";
export default {
components: {
VueScrollSnap
}
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
padding-top: 150px;
margin: 0 auto;
width: 800px;
}
#test1 {
background: #41B813;
}
#test2 {
background: #35495E;
}
</style>
起動します。
npm run serve
ブラウザから http://プライベートIP:8080 に アクセスすると One Page Scroll が確認できます。
-
前の記事
Firebase Databaseの簡単な使い方 2020.02.28
-
次の記事
Nuxt.js ライブラリ「vue-date-dropdown」を使用してドロップダウンの日付ピッカーを実装する 2020.02.29
コメントを書く