2
3
A light JavaScript framework to build fullpage site in a simple way, write with pure JavaScript.
npm install fullpagefullpage框架，不依赖其他任何库，gzip 后不到1kb。
bash
npm install fullpage
`
* 引入位于 build 目录下的 fullpage.min.js（或 fullpage.js 做为开发环境）
* 引入 css 文件 fullpage.css
* 按照下面格式书写html代码（其中 id 为 sectionContent 的为包裹层，你可以自定义修改其id）
`html
2
3
`
初始化
简单使用，只要在页面加载完成后执行：
`javascript
fullpage.init('#sectionContent');
`
如果需要定制化，则需要如下方法：
`javascript
fullpage.init('#sectionContent',{
threshold: 10, // 触发滚动事件的阈值，越小越灵敏
pageSpeed: 600, // 滚屏速度，单位为毫秒 ms
autoScroll: 0, // 自动播放时间间隔，如果为 0 则不自动播放，单位 ms
loopSection: true, // Section循环滚动
loopSlide: true, // Slide循环滑动
afterLoad: null, // 页面载入事件，具体查看下面的 afterLoad 函数
beforeLeave: null, // 页面离开事件，具体查看下面的 beforeLeave 函数
afterSlideLoad: null, // slide 载入事件
beforeSlideLeave: null // slide 离开事件
});
`
$3
离开当前页面时触发的事件，函数中 this 指向当前页面的 section,leaveIndex为要离开页面的 index ，nowIndex 为要载入页面的 Index
$3
载入下一张页面后触发的事件，函数中 this 指向将要载入页面的 section, afterIndex 为要载入页面的 index
$3
离开当前 Slide 时触发的事件，pageIndex是当前section的index，slideNow是当前slide的index，slideAfter是要载入slide的index
$3
载入下一个slide后触发的事件，pageIndex是当前section的index，slideIndex是要载入slide的index
`javascript
fullpage.init('#sectionContent', {
beforeLeave: function (leaveIndex, nowIndex) { // 如果现在在第1个页面，向下滚动后
if (nowIndex === 2) { // leaveIndex = 1,nowIndex = 2
console.log('You will leave page 2') // 这条语句会执行
}
console.log(this, leaveIndex, nowIndex) // 这里的 this 指向将要离开的页面元素，即第一个页面
},
afterLoad: function (afterIndex) { // afterIndex = 2
if (afterIndex === 2) {
console.log('You will go to page 2') // 这条语句会执行
}
console.log(this, afterIndex) // 此处 this 指向当前载入的页面，即第二个页面
},
beforeSlideLeave: function (pageIndex, slideNow, slideAfter) {
var _this = this;
console.log(_this, 'beforeSlideLeave:', pageIndex, slideNow, slideAfter);
},
afterSlideLoad: function (pageIndex, slideIndex) {
var _this = this;
console.log(_this, 'afterSlideLoad:', pageIndex, slideIndex);
}
});
`
方法
$3
页面初始化，el为最外包裹层选择器，options是要定制的参数。具体同初始化
$3
滚动到指定页面,index 为必选参数，slideIndex为可选参数
`javascript
fullpage.moveTo(1) // 滚动到第一个页面
fullpage.moveTo(3,2) // 滚动到第三个页面的第二个slider
`
$3
垂直滚动到下一个页面,callback为回掉函数，可选。
`javascript
fullpage.moveToNext(); // 滚动到下一个页面
fullpage.moveToNext(callback) // 滚动到下一个页面后，执行 callback
fullpage.moveToNext(callback,params...) // 滚动到下一个页面后，执行 callback,params为callback的参数，根据情况传入
function foo(a,b){
console.log(a,b)
}
fullpage.moveToNext(foo,1,2) // 滚动到下一个页面，并输出 1，2
`
$3
垂直滚动到上一个页面，用法同 moveToNext(callback)`