zepto.fullpage.js学习总结

首先，zepto.fullpage.js插件是依赖Zepto的。所以在使用之前需要先引入Zepto.js

参数配置

fullPage支持无参数的调用，每个参数都会有默认值，如果想实现自定义的功能，可以使用自定义参数。自定义参数如下：

$('*').fullpage({
        page: '.page',
        start: 0,
        duration: 500,
        drag: false,
        loop: false,
        dir: 'v',
        change: function () {}, 
        beforeChange: function () {},                                                                            
        afterChange: function () {},
        orientationchange: function () {}                                                  
    });

• page 每屏的选择符，默认是.page
• start 从第几屏开始，默认是第一屏
• duration 每屏动画切换的时间，这段时间内，不能重复切换，默认是500ms，这里只是js限制，css动画时间需要更改css文件
• drag 是否开启拖动功能，默认关闭
• loop 是否开启循环滚动，默认false
• dir 切换屏幕的方向，默认垂直方向(v|h)。v表示垂直方向,portrait 竖屏 landscape 横屏
• der 当滑动距离大于一个值时，才会引起滑动现象，滑动距离=der*屏幕高度|宽度，默认值为0.1
• change/beforeChange/afterChange 当切换屏幕时会触发的事件
  beforeChange事件的事件对象e包含两个属性next和cur，分别表示当前屏和将要切换的下一屏。change/afterChange的事件对象e包含两个属性prev和cur，表示前一屏和当前屏（和beforeChange的区别就是此时切换已经发生了，且不可逆转）。
• orientationchange 当屏幕发生旋转时的回调。

方法

通过方法，可以改变fullPage内部的状态，fullPage的方法列表如下：

• update
  此方法会重新计算和渲染每屏的高度，当你发现如果每屏的高度有问题时，手动调用下此方法就可以了
• moveTo
  切换到指定屏，如果指定的屏数大于屏总数或小于0，都会做修正处理
  该方法接收两个参数：
  next {Number} 必须 要切换到的屏的索引
  anim {Bollean} 可省略 是否有动画 默认为没有动画效果
• movePrev 向前一屏
• moveNext 向后一屏
• start
  开启切换功能，和stop配合使用。每次调用start时都会调用holdTouch
  丰富页面功能，比如到了某页需要点击某个元素后才能到下一页的时候 这个就派上用场了
• stop
  关闭切换功能，和start配合使用。每次调用stop时都会调用unholdTouch
• getCurIndex
  获取当前位于第几屏的方法（第一屏的索引为0）
  return {Number} 当前位于第几屏
• holdTouch
  监控页面触摸，页面的touchmove事件会被阻止掉，默认开启
• unholdTouch 释放页面触摸

方法调用示例：

$.fn.fullpage.update();