vue-fullpage.js
made with Vuejs

vue-fullpage.js

这是基于fullpage.js的Vue.js的官方组件

简介及使用教程

“创建由部分和幻灯片组成的快照滚动站点。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>

示例

vuefullpagejsfullpagek21.gif

作者

Álvaro Trigo

@imac2

相关项目

这是一个基于Vue.js的Github样式的日历热图。
这是一个基于Splide的Vue滑块组件。
这是一个基于Vue的滚动条组件。
这是一个Bootstrap风格简单分页组件。
这是一个Vue.js 2打字机效果组件 。
这是一个漂亮的Vue聊天组件。
这是一个基于Vue.js的模拟命令行效果的动画组件。