iscroll-probe实现下拉刷新和下拉加载效果

.dengl-spinner {  width: 0.682rem;  height: 0.682rem;  position: relative;  position: absolute;  z-index: -1;  left: 50%;  margin-left: -0.341rem;  top: 2.5rem;}.dengl-spinner1{  width: 0.682rem;  height: 0.682rem;  position: relative;  position: fixed;  z-index: -1;  left: 50%;  margin-left: -0.341rem;  bottom: 1.5rem;}.dengl-cube1, .dengl-cube2 {  background-color: #f2513f;  width: 0.682rem;  height: 0.682rem;  position: absolute;  top: 0;  left: 0;  -webkit-animation: cubemove 1.8s infinite ease-in-out;  animation: cubemove 1.8s infinite ease-in-out;}.dengl-cube2 {  -webkit-animation-delay: -0.9s;  animation-delay: -0.9s;}@-webkit-keyframes cubemove {  25% {    -webkit-transform: translateX(1rem) rotate(-90deg) scale(0.5)  }  50% {    -webkit-transform: translateX(1rem) translateY(1rem) rotate(-180deg)  }  75% {    -webkit-transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5)  }  100% {    -webkit-transform: rotate(-360deg)  }}@keyframes cubemove {  25% {    transform: translateX(1rem) rotate(-90deg) scale(0.5);    -webkit-transform: translateX(1rem) rotate(-90deg) scale(0.5);  }  50% {    transform: translateX(1rem) translateY(1rem) rotate(-179deg);    -webkit-transform: translateX(1rem) translateY(1rem) rotate(-179deg);  }  50.1% {    transform: translateX(1rem) translateY(1rem) rotate(-180deg);    -webkit-transform: translateX(1rem) translateY(1rem) rotate(-180deg);  }  75% {    transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5);    -webkit-transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5);  }  100% {    transform: rotate(-360deg);    -webkit-transform: rotate(-360deg);  }}

<div class="dengl-spinner" style="top:17rem">  <div class="dengl-cube1"></div>  <div class="dengl-cube2"></div></div><div class="dengl-spinner1" style="bottom:3rem;">  <div class="dengl-cube1"></div>  <div class="dengl-cube2"></div></div>

 <style>    #wrapper {      position: absolute;      width: 100%;      z-index: 1;      top: 16.1rem;      bottom: 2rem;      left: 0;      overflow: hidden;    }    #all {      position: absolute;      z-index: 1;      -webkit-tap-highlight-color: rgba(0,0,0,0);      width: 100%;      -webkit-transform: translateZ(0);      -moz-transform: translateZ(0);      -ms-transform: translateZ(0);      -o-transform: translateZ(0);      transform: translateZ(0);      -webkit-touch-callout: none;      -webkit-user-select: none;      -moz-user-select: none;      -ms-user-select: none;      user-select: none;      -webkit-text-size-adjust: none;      -moz-text-size-adjust: none;      -ms-text-size-adjust: none;      -o-text-size-adjust: none;      text-size-adjust: none;      background: #fff;      min-height: 100.5%;    }  </style>

 <div id="wrapper">            <ul id="all"></ul>  </div>

var index = 2, size = 10;    $(function () {      $.qr.ajax('UserCenter/myJdAndMl', { token: $.qr.gettoken() }, function (d) {        var vm1 = new Vue({          el: '#top_1',          data: {            money: d.data_single.money          }        });        var vm2 = new Vue({          el: '#top_2',          data: {            earnings: d.data_single.earnings,            has_catfood: d.data_single.has_catfood,            not_catfood: d.data_single.not_catfood          }        });      });      var myScroll = new IScroll('#wrapper', {        mouseWheel: false,        bounceTime: 1000,        bounceLock: true,        probeType: 3      });      var handle = 0;      myScroll.on('scroll', function () {        if (this.y > 50) {          handle = 1;        } else if (this.y < (this.maxScrollY - 50)) {          handle = 2;        };      });      myScroll.on('scrollEnd', function () {        if (handle == 2) {          add(index, size);        } else if (handle == 1) {          add(1, size);        }        handle = 0;        myScroll.refresh();      });      document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);      add(1, size);    });    function add(pindex, psize) {      $.qr.ajax('UserCenter/maoliangRecordList',        { token: $.qr.gettoken(), pagesize: psize, pageindex: pindex }, function (d) {          var _h = '';          if (pindex != 1 && d.data_list.data_list.length > 0) index++;          if (d.data_list.data_list.length == 0) return false;           $(d.data_list.data_list).each(function (i, j) {            _h += '<li>';            _h += '<div class="info" style="left: 10%">' + j.name + '</div>';            _h += '<div class="info">' + j.num + '</div>';            _h += '<div class="info">' + j.time + '</div>';            _h += '</li>';          });          if (pindex == 1) $('#all').empty();          $('#all').append(_h);        }, false);    }