实现淘宝首页上下拖动,标题栏效果

很多人觉得这个效果很好写,刚开始我也是这么想的,前前后后写了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]

 

捋了捋思路,现在也只是实现了效果,

里面有很多重复代码,像获取元素的,我试着写在函数的外面,报错,写个封装吧,调用都是红线,反正目前就是这样了,

那位大神在写这个效果的话,如果看到了,非常感谢能给我看一看代码呀,不胜感激

 

posted @ 2018-10-24 15:34  adongP  阅读(501)  评论(0编辑  收藏  举报