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的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个基于Vue的图像墙组件。
这是一个灵活可扩展的内容容器组件。
这是ApexCharts的Vue.js组件。
这是一个强大而易用、通用的、可执行的VUE UI组件库。