https://github.com/wendaosanshou/vue-fullpage

项目中用到了vue-fullpage，遇到了几个问题。

项目情况主要就是做个数据报告，通过移动端的单页滚动效果来展示数据。单页滚动中某些元素需要相应的动画效果。

一、fullpage下 动画元素不能嵌套在父级以下的容器内

实际上这个bug已经被作者修改好了的，但是并没有更新到npm上。

https://github.com/wendaosanshou/vue-fullpage/commit/d309628ecf54a390bd5a070ab411d43b8457e3d0

所以这里还是提一下。

根据源码，当触发toogle_animate事件时，会判断该页面是否当前页来触发该页下的元素的动画效果。

问题在于如何判断当前页面，未修改bug前：是通过查找带有v-animate指令的元素的父元素上的data-id来与组件的全局变量curIndex比较，相等即v-animate指令的动画应显示，不等则去移除动画。

因此，当把v-animate指令嵌套在父级一下的容器时就找不到data-id了，那这样data-id就会一直都是0，所以这些嵌套了的动画就会在首页显示时已经执行了，并在切换到下一页时就和首页的元素一样opacity为0了。

修改后的代码

var parent = el.parentNode
//解决bug的代码
while (parent.getAttribute('data-id') === null) {
  parent = parent.parentNode
}

var curPage = +parent.getAttribute('data-id')
if (curIndex === curPage) {
  that.addAnimated(el, aminate)
} else {
  el.style.opacity = '0'
  that.removeAnimated(el, aminate)
}

增加了标注的几行代码，这样就保证了一定找得到相应的data-id了。

二、组件中数据刷新后，会自动返回首页

在github上也有相应的issue，其实作者也已经对此做了修改。那就是在opts参数中增加了字段needInitAfterUpdated就此判断是否刷新组件。

三、消除ios或微信浏览器中橡皮擦效果导致滑动页面时的不顺畅

同样作者也已经解决了这个问题，也是通过增加个字段preventWechat来解决。

以上圈着的代码作者都已经推到线上master，但是npm上的代码还没有更新。建议各位遇到相关问题的小伙伴，去看看源码，不难理解的。