因为所有的页面切换都是由PageController发起，而控制currentPage的组件并不是PageController，所以需要有一个父子组件事件，由子组件PageController发起，传递一个参数表示要切换到第几个页面，因此在PageController中定义一个method：
changePage (index) { this.$emit('changePage', index); }
父组件接受该事件并调用自己定义的changePage方法，修改自身的currentPage属性
changePage (index) { // 改变page this.currentPage = index; }
箭头按钮上下滚动
为了实现上下滚动，需要知道当前页面的前一个页面和后一个页面分别是第几个页面，因此可以使用计算属性，计算出前一个和后一个页面的index值：
// PageController.vue nextIndex () { if (this.currentPage === this.pageNum) { return 1; } else { return this.currentPage + 1; } }, prevIndex () { if (this.currentPage === 1) { return this.pageNum; } else { return this.currentPage - 1; } }
在点击箭头时，将对应的nextIndex或prevIndex值当做参数传给changePage方法。
滚轮滚动和移动端滚动
滚轮滚动和移动端滚动主要依靠window的监听事件，根据传入的event属性，计算出页面是应该向上还是向下滚动，将需要滚动的方向作为参数传递给处理函数handler。
因为代码略长，因此不全部显示在文章中，只显示处理函数相关逻辑
let _this = this; let timer = null; function scrollHandler (direction) { // 防止重复触发滚动事件 if (timer != null) { return; } if (direction === 'down') { _this.changePage(_this.nextIndex); } else { _this.changePage(_this.prevIndex); } timer = setTimeout(function() { clearTimeout(timer); timer = null; }, 500); }
需要注意的一点是，移动端做滚动判断时，要求touches和changedTouches之间需要一定的间隔，不然容易误触发滚动事件。
OPTIONS属性的分发
为了使使用者更加方便地编写页面内容而不在意具体的页面序号，我采用了自动对page内的option赋值的方法。其实现原理是在App.vue文件中，使用钩子函数mounted，对page中的option属性进行设置。
mounted () { this.$children.forEach((child, index) => { // 动态设置各个page内的options if (child.option === null) { let childOption = this.options[index]; this.$set(childOption,'index',index+1); child.option = childOption; } }); }
高级属性：新的钩子函数
为了满足部分使用者的需求，我在设置了两个钩子函数：beforeLeave和afterEnter。
这两个钩子函数可以设置在对应页面的options属性对象中，并且含有一个默认的参数，为对应页面的page组件实例对象。
其实现方式为在原先的changePage函数（App.vue）内添加新的逻辑：
changePage (index) { // beforeLeave let beforeIndex = this.currentPage - 1; let leaveFunction = this.options[beforeIndex].beforeLeave; typeof leaveFunction === 'function' && leaveFunction.call(this,this.$children[beforeIndex]); // 改变page this.currentPage = index; // afterEnter let nextIndex = index-1; let enterFunction = this.options[nextIndex].afterEnter; this.$nextTick(function () { typeof enterFunction === 'function' && enterFunction.call(this,this.$children[nextIndex]); }) }
总结
这篇文章记录了我开发一个FullPage页面的总体流程，将主要的逻辑重新顺理了一遍，还有一些小的细节没有写在文章中，有兴趣的可以去具体的项目页面看源码