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上的代码还没有更新。建议各位遇到相关问题的小伙伴,去看看源码,不难理解的。