vue-fullpage.js
made with Vuejs

“创建由部分和幻灯片组成的快照滚动站点。fullPage.js库的官方Vue.js组件”

vue-fullpage.js是基于fullpage.js的Vue.js的官方组件，可以创建由部分和幻灯片组成的快照滚动站点。

安装

Npm

npm i vue-fullpage.js

Yarn

yarn add vue-fullpage.js

浏览器

<!-- On the page head -->
<link rel="stylesheet" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css">

<!-- Include after Vue (before closing body) -->
<script src="https://unpkg.com/vue-fullpage.js/dist/vue-fullpage.min.js"></script>

使用

全局引入

import Vue from 'vue'
import 'fullpage.js/vendors/scrolloverflow' // Optional. When using scrollOverflow:true
import './fullpage.scrollHorizontally.min' // Optional. When using fullpage extensions
import VueFullPage from 'vue-fullpage.js'

Vue.use(VueFullPage);

new Vue({
  el: '#app',
  render: h => h(App)
});

组件中使用

<div>
    <full-page ref="fullpage" :options="options" id="fullpage">
    <div class="section">
      First section ...
    </div>
    <div class="section">
      Second section ...
    </div>
  </full-page>
</div>

示例