iscroll实现下拉刷新功能

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

版本号：iscroll4.2.5.js

iscroll 版本很有关系  在线： demo链接   有出现白屏的bug,将iscroll版本改成iscroll4.2.5就可以了

html

body,ul,li {
  padding:0;
  margin:0;
  border:0;
}

body {
  font-size:12px;
  -webkit-user-select:none;
  -webkit-text-size-adjust:none;
  font-family:helvetica;
}

#header {
  position:absolute; z-index:2;
  top:0; left:0;
  width:100%;
  height:45px;
  line-height:45px;
  background-color:#d51875;
  background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
  background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
  background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
  padding:0;
  color:#eee;
  font-size:20px;
  text-align:center;
}

#header a {
  color:#f3f3f3;
  text-decoration:none;
  font-weight:bold;
  text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#footer {
  position:absolute; z-index:2;
  bottom:0; left:0;
  width:100%;
  height:48px;
  background-color:#222;
  background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
  background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
  background-image:-o-linear-gradient(top, #999, #666 2%, #222);
  padding:0;
  border-top:1px solid #444;
}

#wrapper {
  position:absolute; z-index:1;
  top:45px; bottom:48px; left:-9999px;
  width:100%;
  background:#aaa;
  overflow:auto;
}

#scroller {
  position:absolute; z-index:1;

  -webkit-tap-highlight-color:rgba(0,0,0,0);
  width:100%;
  padding:0;
}

#scroller ul {
  list-style:none;
  padding:0;
  margin:0;
  width:100%;
  text-align:left;
}

#scroller li {
  padding:0 10px;
  height:40px;
  line-height:40px;
  border-bottom:1px solid #ccc;
  border-top:1px solid #fff;
  background-color:#fafafa;
  font-size:14px;
}

#myframe {
  position:absolute;
  top:0; left:0;
}




#pullDown, #pullUp {
  background:#fff;
  height:40px;
  line-height:40px;
  padding:5px 10px;
  border-bottom:1px solid #ccc;
  font-weight:bold;
  font-size:14px;
  color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon {
  display:block; float:left;
  width:40px; height:40px;
  background:url(pull-icon@2x.png) 0 0 no-repeat;
  -webkit-background-size:40px 80px; background-size:40px 80px;
  -webkit-transition-property:-webkit-transform;
  -webkit-transition-duration:250ms;  
}
#pullDown .pullDownIcon {
  -webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon {
  -webkit-transform:rotate(-180deg) translateZ(0);
}

#pullDown.flip .pullDownIcon {
  -webkit-transform:rotate(-180deg) translateZ(0);
}

#pullUp.flip .pullUpIcon {
  -webkit-transform:rotate(0deg) translateZ(0);
}

#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
  background-position:0 100%;
  -webkit-transform:rotate(0deg) translateZ(0);
  -webkit-transition-duration:0ms;

  -webkit-animation-name:loading;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}

@-webkit-keyframes loading {
  from { -webkit-transform:rotate(0deg) translateZ(0); }
  to { -webkit-transform:rotate(360deg) translateZ(0); }
}





iScroll

  
    
      Pull down to refresh...
    

    

      
Pretty row 1
      
Pretty row 2
      
Pretty row 3
      
Pretty row 4
      
Pretty row 5
      
Pretty row 6
      
Pretty row 7
      
Pretty row 8
      
Pretty row 9
      
Pretty row 10
      
Pretty row 11
      
Pretty row 12
      
Pretty row 13
      
Pretty row 14
      
Pretty row 15
      
Pretty row 16
      
Pretty row 17
      
Pretty row 18
      
Pretty row 19
      
Pretty row 20
      
Pretty row 21
      
Pretty row 22
      
Pretty row 23
      
Pretty row 24
      
Pretty row 25
      
Pretty row 26
      
Pretty row 27
      
Pretty row 28
      
Pretty row 29
      
Pretty row 30
      
Pretty row 31
      
Pretty row 32
      
Pretty row 33
      
Pretty row 34
      
Pretty row 35
      
Pretty row 36
      
Pretty row 37
      
Pretty row 38
      
Pretty row 39
      
Pretty row 40
    
    
      Pull up to refresh...
    
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。