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

需要注意的是外部wrapper的高度，以及all的高度，须是>100%。

附加一个css3 的loading

.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>