vue-fullpage使用时遇到的问题

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值