很多人觉得这个效果很好写,刚开始我也是这么想的,前前后后写了3、4个效果,怎么看都有些不一样,
刚开始用了ionScroll写的
ionScroll(){vardefoultshow=document.getElementById('defaultShow');varchangeshow=document.getElementById('changeShow');varionheader=document.getElementById('ionheader');console.log(this.content.scrollTop)if(this.content.scrollTop>10){defoultshow.style.animation="defaulshow3sforwards"changeshow.style.animation="changeshow3sforwards"ionheader.style.animation="ionheader3sforwards"}elseif(this.content.scrollTop<=10){defoultshow.style.animation="changeshow13sforwards"changeshow.style.animation="defaulshow13sforwards"ionheader.style.animation="ionheader13sforwards"}}这个实现的是啥这个效果:
还有写了两个方法,都是用这个写的,都是这样的问题,
然后我就请教了一位老师(买了网上的视频,有技术老师),还有一些写过这个项目的,有些告诉我说,直接用css3就能实现,有的告诉说就用ionScroll就能实现,但是我写了好几个都没有像支付宝那样的效果,我觉得这是个bug,不知道是我观察的和别人观察的是不是不一样,别人说是一模一样的,反正我没有写出来,
如果有哪位大神,用ionScroll写出来了,请一定告诉一下我哦,非常感谢!!我就是一菜鸟,怎么都出不来,
后来,就只能用了js写了,
用了touchmovetouchend;
本来写了touchstart,后来发现这个写不写都没有关系,我只是要获取的是scroll的top值,
我刚开是写这么写的:
e.path[4]这个获取的元素应该是scrll-content,但是有时候,e.path[4]又不是这个元素了,so,没有效果,也很正常;
最后我只能,用了原生获取dom的方法,获取这个class(‘scroll-content’)[0];替代了e,path[4]
捋了捋思路,现在也只是实现了效果,
里面有很多重复代码,像获取元素的,我试着写在函数的外面,报错,写个封装吧,调用都是红线,反正目前就是这样了,
那位大神在写这个效果的话,如果看到了,非常感谢能给我看一看代码呀,不胜感激