vue中使用fullpage.js实现全屏滚动

踩坑：正常使用时，几乎没什么问题，但是使用笔记本的触摸板时会导致滑动一次滚动多屏的问题，查了好多资料，终于解决了。

思考：主要原因是官方没有做节流和防抖处理，可能是出于滚屏速度考虑，所以在使用触摸板时难免会引发这个问题。

解决方案：禁用自带的滚动方法，通过配合插件提供的api增加防抖函数。

• 文档地址1：github.com/alvarotrigo…
• 文档地址2：github.com/alvarotrigo…

说明:参照文档1的方式写页面和配置项，参照文档2的配置项做具体操作。（因为直接参照文档2的页面demo会导致单页面应用跳转到其它页面的时候滚动失效，且再次切回本页面时，自定义滚动也失效）

示例代码：

Home.vue

<full-page :options="options">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
    <div class="section">第四屏</div>
    <div class="section">第五屏</div>
</full-page>

<script>
    export default {
        data(){
            return {
                options: {
                    licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
                    scrollOverflow: true,
                    scrollBar: false,
                    onLeave:this.onLeave,
                    afterLoad:this.afterLoad
               }
            }
        },
        mounted() {
          this.$nextTick(()=>{
            //禁用向下滚动
            fullpage_api.setAllowScrolling(false, 'down');
            //禁用向上滚动
            fullpage_api.setAllowScrolling(false, 'up');
            //注册事件
            window.onmousewheel=document.onmousewheel=this.scrollFunc;
          });
        },
        methods:{
           onLeave(origin, destination, direction){
                //离开上一屏之前
           },
           afterLoad(){
               //进入下一屏之后
           },
           scrollFunc(e){//防抖
                e=e||window.event;
                var delta = null;
                var timer = null;
                if(e.wheelDelta){//IE/Opera/Chrome
                  delta = e.wheelDelta;
                }else if(e.detail){//Firefox
                  delta = e.detail;
                };
                if(delta<0){//向下滚
                  fullpage_api.moveSectionDown();
                }else if(delta>0){//向上滚
                  fullpage_api.moveSectionUp();
                };
                //为了防止一次滚动太凶而直接跳转到底部，先关闭监听一段时间后再开启
                window.onmousewheel=document.onmousewheel=null;
                clearTimeout(timer);
                timer = setTimeout(()=>{//再次重新注册
                  window.onmousewheel=document.onmousewheel=this.scrollFunc;
                },2000);
           },
           scrollFunc(e){//节流
            e=e||window.event;
            var delta = null;
            var timer = null;
            var flag = true;//节流阀
            if(e.wheelDelta){//IE/Opera/Chrome
              delta = e.wheelDelta;
            }else if(e.detail){//Firefox
              delta = e.detail;
            };
            if(!flag)return;
            flag = false;
            if(delta<0){//向下滚
              fullpage_api.moveSectionDown();
            }else if(delta>0){//向上滚
              fullpage_api.moveSectionUp();
            };
            //为了防止一次滚动太凶而直接跳转到底部，先关闭监听一段时间后再开启
            window.onmousewheel=document.onmousewheel=null;
            clearTimeout(timer);
            timer = setTimeout(()=>{//再次重新注册
              flag = true;
              window.onmousewheel=document.onmousewheel=this.scrollFunc;
            },2000);
          },
        }
    }
</script>

补充：安装按文档一即 npm install --save vue-fullpage.js

main.js

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

Vue.use(VueFullPage);