实现淘宝首页上下拖动,标题栏效果
很多人觉得这个效果很好写,刚开始我也是这么想的,前前后后写了3、4个效果,怎么看都有些不一样,
刚开始用了ionScroll写的
ionScroll() { var defoultshow = document.getElementById('defaultShow'); var changeshow = document.getElementById('changeShow'); var ionheader = document.getElementById('ionheader'); console.log(this.content.scrollTop) if (this.content.scrollTop > 10) { defoultshow.style.animation = "defaulshow 3s forwards" changeshow.style.animation = "changeshow 3s forwards" ionheader.style.animation = "ionheader 3s forwards" } else if (this.content.scrollTop <= 10) { defoultshow.style.animation = "changeshow1 3s forwards" changeshow.style.animation = "defaulshow1 3s forwards" ionheader.style.animation = "ionheader1 3s forwards" } }
这个实现的是啥这个效果:
上拉
3s之后:
下拉:
这个有时间限制,仔细看看支付宝的,手指不松开,标题栏那一块是不动的,
还有写了两个方法,都是用这个写的,都是这样的问题,
然后我就请教了一位老师(买了网上的视频,有技术老师),还有一些写过这个项目的,有些告诉我说,直接用css3就能实现,有的告诉说就用ionScroll就能实现,但是我写了好几个都没有像支付宝那样的效果,我觉得这是个bug,不知道是我观察的和别人观察的是不是不一样,别人说是一模一样的,反正我没有写出来,
如果有哪位大神,用ionScroll写出来了,请一定告诉一下我哦,非常感谢!! 我就是一菜鸟,怎么都出不来,
后来,就只能用了js写了,
用了touchmove touchend ;
本来写了touchstart,后来发现这个写不写都没有关系,我只是要获取的是scroll的top值,
我刚开是写这么写的:
optionsmove(e) { // 标题栏 var defaultShow = document.getElementById('defaultShow'); var changeShow = document.getElementById('changeShow'); // 伪标题栏 var ionheader = document.getElementById('ionheader');// console.log(e); // e.preventDefault; e.stopPropagation(); this.starty = e.path[4].scrollTop; // console.log(this.starty); if (this.starty <= 40 && this.starty > 0) { defaultShow.style.opacity = String((this.starty) * 0.025); changeShow.style.opacity = String(1 - (this.starty) * 0.025) ionheader.style.opacity = String(1 - (this.starty) * 0.025) console.log("move小于40"); } else if (this.starty > 40) { defaultShow.style.opacity = "1"; changeShow.style.opacity = '0'; console.log("move大于40"); } } optionsup(e) { e.stopPropagation(); var defaultShow = document.getElementById('defaultShow'); var changeShow = document.getElementById('changeShow'); var ionheader = document.getElementById('ionheader');this.starty = e.path[4].scrollTop; // console.log(e.path, this.starty); if (this.starty < 20) { this.starty = e.path[4].scrollTop = 0; defaultShow.style.opacity = "0"; changeShow.style.opacity = '1'; ionheader.style.opacity = "1" console.log('end小于20') } else if (this.starty >= 20) { this.starty = e.path[4].scrollTop > 40; defaultShow.style.opacity = "1"; changeShow.style.opacity = '0'; ionheader.style.opacity = "0"; console.log('end大于20'); } }
这个效果就是和支付宝上一样的,但是还是有个bug,这个bug就是这个效果有时候没有效果,找了半天,找到bug的根源了
e.path[4] 这个获取的元素应该是scrll-content,但是有时候,e.path[4]又不是这个元素了,so,没有效果,也很正常;
最后我只能,用了原生获取dom的方法,获取这个class(‘scroll-content’)[0];替代了e,path[4]
捋了捋思路,现在也只是实现了效果,
里面有很多重复代码,像获取元素的,我试着写在函数的外面,报错,写个封装吧,调用都是红线,反正目前就是这样了,
那位大神在写这个效果的话,如果看到了,非常感谢能给我看一看代码呀,不胜感激