html下拉刷新上拉加载Refresher3.0

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分需要先引入CSS样式文件和javascript文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/reset.css"/>
<link type="text/css" rel="stylesheet" href="css/refresh.css"/>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/refresh.js"></script>

然后设置好页面元素的样式，代码如下：

body, html {
	padding: 0;
	margin: 0;
	height: 100%;
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
	color: #111;
}
.scroller li {
	height:60px;
	border-bottom: 1px solid #eee;
	background-color: #fff;
	font-size: 14px;
	
}
.pullDownLabel img {
	width: 13px;
	height: 13px;
	margin-top: -1px;
	vertical-align: -2px;
	margin-right: 5px;
}
#wrapper ul li img{width:60px; float:left;  margin-left:10px;}
.game-info{text-align:left; float:left; margin-left:10px; width:210px; overflow:hidden; height:60px;}
.game-info h1{font-size:16px; margin-bottom:8px;}
.game-info p:nth-child(2){font-size:12px; color:#B6B6B6;}
.game-info p:nth-child(3){font-size:12px; color:#9D9D9D;}
#wrapper ul li button{position:absolute; right:20px; margin-top:10px; background-color:#F8CD0C; border:0; color:#fff; font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; padding:5px 14px; border-radius:3px;}

页面的body部分结构比较简单，一个div容器里有多个li元素，代码如下：

<div id="wrapper">
  <ul>
    <li>
    <img src="images/game1.png">
    <div class="game-info">
    <h1>华仔天下</h1>
    <p>3万次下载     147.98M</p>
    <p>网易游戏出品,双维度操控，真人真机对战</p>
    </div>
    <button>下载</button>
    </li>
    <li>
     <img src="images/game2.png">
    <div class="game-info">
    <h1>有杀气的小华</h1>
    <p>4万次下载     97.98M</p>
    <p>网易游戏出品,3D即时战斗Q版手游</p>
    </div>
    <button>下载</button>
    </li>
    <li>
     <img src="images/game3.png">
    <div class="game-info">
    <h1>烈焰小华</h1>
    <p>5万次下载     67.18M</p>
    <p>再现经典即时战斗玄幻武侠手游</p>
    </div>
    <button>下载</button>
    </li>
    <li>
     <img src="images/game4.png">
    <div class="game-info">
    <h1>灵车飘逸吧</h1>
    <p>2万次下载     33.18M</p>
    <p>承载着3亿玩家期待的十年经典游戏</p>
    </div>
    <button>下载</button>
    </li>
    <li>
      <img src="images/game5.png">
    <div class="game-info">
    <h1>辉仔漏夜上东莞</h1>
    <p>2万次下载     53.43M</p>
    <p>超愉悦，与二次女友尺度大冒险</p>
    </div>
    <button>下载</button>
    </li>
    <li>
         <img src="images/game6.png">
    <div class="game-info">
    <h1>仙剑客栈20周年版</h1>
    <p>7万次下载     133.18M</p>
    <p>仙剑20周年王牌手游巨制一全新演绎大	</p>
    </div>
    <button>下载</button>
    </li>
  </ul>
</div>

页面底部需要调用refresher插件，代码如下：

refresher.init({
	id:"wrapper",//<------------------------------------------------------------------------------------┐
	pullDownAction:Refresh,                                                            
	pullUpAction:Load 																			
	});																																							
function Refresh() {																
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;																		
		el =document.querySelector("#wrapper ul");					
		//这里写你的刷新代码				
		document.getElementById("wrapper").querySelector(".pullDownIcon").style.display="none";		
		document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML="<img src='images/ok.png'/>刷新成功";																					 
		setTimeout(function () {
			wrapper.refresh();
			document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML="";								
			},1000);//模拟qq下拉刷新显示成功效果
		/****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
	}, 1000);
}
function Load() {
	setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el =document.querySelector("#wrapper ul");
		for (i=0; i<2; i++) {
			li = document.createElement('li');
			li.innerHTML="<img src='images/game8.png'><div class='game-info'><h1>华仔超神战记</h1><p>9万次下载     89.18M</p><p>秒杀虚拟摇杆，砸烂手机键盘</p></div><button>下载</button>"
			el.appendChild(li, el.childNodes[0]);
		}
		wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
	},2000);	
}