MXOXW

Life always finds a way.

H5下拉刷新

| Comments

H5实现下拉刷新, 上拉加载的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
  .trantionTop{-webkit-transition:-webkit-transform .6s;-moz-transform:-moz-transform .6s;-ms-transform:-ms-transform .6s; -o-transform:-o-transform .6s;transition:transform .6s;}
  .mod_loading{text-align:center;padding:20px 0;text-align:center;color:#000;line-height:21px;}
  .mod_loading_inner {margin:0 auto;text-align: center; position: relative; width: 140px; border-radius: 6px; font-size: 14px; padding: 45px 0 10px 0;color:#000; }
  .mod_loading_icon { position: absolute; top: 15px; left: 50%; margin-left: -10px; width: 18px; height: 18px; border: 1px solid #FF5A54; -webkit-border-radius: 20px;border-radius: 20px; -webkit-animation: gif 1s infinite linear; animation: gif 1s infinite linear; clip: rect(0 auto 17px 0) }
  @keyframes gif {
        0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
      }
  @-webkit-keyframes gif {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
</style>
</head>
<body>
  <div class="mod_container" style="-webkit-transform: translate3d(0,0px,0);-webkit-backface-visibility:hidden;-moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000;">

    <div class="mod_loading" id="pullTop" style="position:absolute;top:-50px;z-index:-1;width:100%;margin:0 auto;">下拉可以刷新</div>

    <div class="mod_loading" id="pullBottom" style="position: static;">
      <div class="mod_loading_inner">
        <i class="mod_loading_icon"></i>
        正在加载，请稍候…
      </div>
    </div>
  </div>
<script type="text/javascript" src="http://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script type="text/javascript">
  // 下拉刷新, 上拉加载
  var PulldownRefresh = function(){
    this.init.apply(this,arguments);
  }

  PulldownRefresh.prototype = {
    init: function (options){
      this.ele = options.ele;

      $(document).on({
        'touchstart': $.proxy(this.start, this),
        'touchmove': $.proxy(this.move, this),
        'touchend': $.proxy(this.end, this),
        'touchcancel': $.proxy(this.end, this)
      });
    },
    start: function (e) {
      this.distance = 0;
      this.startY = e.touches[0].clientY;
      this._scrollTop = $(window).scrollTop();
      this.ele.removeClass('trantionTop');
    },
    move: function (e){
      var currentY = e.changedTouches[0].clientY;
      this.isUp = currentY > this.startY;

      if (this._scrollTop <= 0 && this.isUp) {
        e.preventDefault();
        this.distance = currentY - this.startY;
        this.distance = Math.floor(this.distance * .4);
        if (this.distance >= 20) {
          $('#pullTop').html('松开立即刷新');
        } else {
          $('#pullTop').html('下拉可以刷新');
        }

        this.ele.css("-webkit-transform", "translate3d(0," + this.distance + "px,0)");
      } else if ((this._scrollTop + $(window).height()) >= $('body').height() && !this.isUp) {
        e.preventDefault();
        this.distance = this.startY - currentY;
        this.distance = Math.floor(this.distance * .4);
        if (this.distance >= 20) {
          $('#pullBottom').html('松开立即加载');
        } else {
          $('#pullBottom').html('上拉加载更多');
        }
        this.ele.css("-webkit-transform", "translate3d(0, -" + this.distance + "px,0)");
      }
    },
    end: function (e){
      if (this.distance >= 20) {
        if (this.isUp) {
          this.ele.addClass('trantionTop').css("-webkit-transform", "translate3d(0, 30px,0)");
          $('#pullTop').html('正在加载，请稍候…');
          setTimeout(function(){
            location.reload();
          }, 500);
        }else{
          if ($('.mod_download_lk').length > 3) {
            middleTip();
            this.ele.addClass('trantionTop').css("-webkit-transform", "translate3d(0,0,0)");
            $(window).scrollTop($(window).scrollTop() + 100);
            return;
          }

          $('#pullBottom').html('<div class="mod_loading_inner"><i class="mod_loading_icon"></i>正在加载，请稍候…</div>');
          this.ele.addClass('trantionTop').css("-webkit-transform", "translate3d(0,0,0)");
          // TODO
          $(window).scrollTop($(window).scrollTop() + 100);
        }
      }else if(this.ele.css("-webkit-transform") != 'translate3d(0px, 0px, 0px)'){
        this.ele.addClass('trantionTop').css("-webkit-transform", "translate3d(0,0,0)");
      }
    }
  }

  var pulldowntoreload = new PulldownRefresh({
    "ele": $('.mod_container')
  });
</script>
</body>
</html>

评论