开发项目中，需要用到下拉刷新，开始本来打算自己写这个效果的。但是，自己写的效果不流畅，显得死板。通过查询相关资料，发现了iscroll插件。
iScroll是一种高性能，小体积，无依赖性，跨平台的JS滚动，下拉刷新插件，可以动态加载分页内容。它适用于台式机，手机和智能电视。它的性能和尺寸大力优化等提供的一致好评现代老设备的平滑效果。
版本：iscroll4
代码如下：
html代码
<!DOCTYPE html>
<html>
<head>
<title>下拉刷新</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=2.0" name="viewport" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/refresh.css">
</head>
<body>
<div id="page">
<div class="header" id="header">
<h3>页头</h3>
</div>
<div class="container" id="container">
<div id="wrapper">
<div id="scroller" style="width:100%; position:absolute; top:-40px;">
<div class="showbox" id="downLoading" style="display:block;">
<div class="loadingWord">
<img src="imgs/down-vector.png">
<span class="loading_text downRefreshLable">下拉刷新</span>
</div>
</div>
<div id="dataList" class="dataList">
<ul>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
<li>1111111111111111</li>
</ul>
<ul>
<li>2222222222222222</li>
<li>2222222222222222</li>
<li>2222222222222222</li>
</ul>
</div>
<div class="showbox" id="upLoading" style="display:block;">
<div class="loadingWord">
<img src="imgs/up-vector.png">
<span class="loading_text downRefreshLable">上拉更多</span>
</div>
</div>
</div>
</div>
</div>
<div class="footer" id="footer">
<h3>页脚</h3>
</div>
</div>
<script type="text/javascript" ></script>
<script src="js/lib/require.js" data-main="js/app/refresh"></script>
</body>
</html>
js代码
require.config({
paths: {
'zepto':'../lib/zepto', 'refresh':'../app/refresh', 'iscroll':'../lib/iscroll4' }, shim: { "zepto": { exports : "$" }, "iscroll":{ exports : 'isc' } } }); require(['zepto', 'iscroll', 'refresh'], function($,isc,ref){ ref.init(); }); define(["zepto"],function($){ //全局变量 /*屏幕长宽*/ var window_width = $(window).width(); var window_height = $(window).height(); var i = 0; var _iscroll; var elem = { //全局变量 /*var window_width = $(document).width(); var window_height = $(document).height(); console.log('window_width===' +window_width +'window_height===' +window_height);*/ //入口函数 init:function(){ elem.initStyle(); elem.initIscroll(); }, //初始化样式 initStyle:function(){ //页面主要内容.container样式 var header_height = $('#header').height(); var footer_height = $('#footer').height(); var downLoad_height = $('#downLoading').height(); var upLoad_height = $('#upLoading').height(); var container_height = window_height - header_height - footer_height; $('#container').height(container_height).css('top', header_height + 'px'); //iscroll滚动#warpper样式 $('#wrapper').height(container_height + downLoad_height); $('#dataList').css('min-height', container_height - upLoad_height + 'px'); }, //刷新页面数据 refreshData:function(){ console.log('刷新数据===Ajax'); }, //加载更多数据 loadMoreData:function(){ console.log('下拉更多===Ajax'); i++; var newData = '<ul>' + '<li>'+ i +'</li>' + '<li>'+ i +'</li>' + '<li>'+ i +'</li>' + '</ul>' $('#dataList').append(newData); _iscroll.refresh(); //elem.initIscroll(); }, //滑动控件初始化 initIscroll:function(){ var refreshKey = false;// var loadMoreKey = false;// _iscroll=new iScroll('wrapper', { //scrollbarClass: 'myScrollbar', checkDOMChanges:true, vScrollbar : false, //开始滚动时回调 onScrollMove: function () { ////console.log(this.y); var _y = this.y;//下拉距离 var _max = (this.maxScrollY)*(-1);//最大的下拉距离,负值 //console.log('_y:'+_y+' _max:' + _max); //页头---下拉刷新 if(_y>0&&_y<40){//显示'下拉刷新' $('#downLoading').find('img').animate({ 'transform':'rotate(-0deg)', '-ms-transform':'rotate(-0deg)', '-moz-transform':'rotate(-0deg)', '-webkit-transform':'rotate(-0deg)', '-o-transform':'rotate(-0deg)'},200); $('#downLoading').find('.loading_text').html('下拉刷新'); refreshKey = false;//下拉超过40，释放后刷新数据 }else if(_y>=40){//显示释放更新，后调用刷新数据函数 $('#downLoading').find('img').animate({ 'transform':'rotate(180deg)', '-ms-transform':'rotate(180deg)', '-moz-transform':'rotate(180deg)', '-webkit-transform':'rotate(180deg)', '-o-transform':'rotate(180deg)'},200); $('#downLoading').find('.loading_text').html('释放更新'); refreshKey = true;//下拉超过40，释放后刷新数据 //上拉---加载更多 }else if((-_y)>_max){//_max //显示加载中 $('#upLoading').find('img').attr('src', 'imgs/waiting.gif').css('display', 'block'); $('#upLoading').find('.loading_text').html('加载中...'); loadMoreKey = true; }else{ //显示上拉更多 $('#upLoading').find('img').attr('src', 'imgs/up-vector.png').css('display', 'block'); $('#upLoading').find('.loading_text').html('上拉更多'); refreshKey = false;//下拉超过40，释放后刷新数据 loadMoreKey = false; } }, //手离开屏幕时回调 onTouchEnd:function(){ //当触发释放更新时，需要更新数据 if(refreshKey){ var downLoad_height = $('#downLoading').height(); $('#downLoading').find('img').attr('src', 'imgs/waiting.gif').css('display', 'block'); $('#downLoading').find('.loading_text').html('加载中...'); $('#scroller').css('top', '0px'); elem.refreshData(); setTimeout(function(){ $('#downLoading').find('img').attr('src', 'imgs/down-vector.png').css('display', 'block'); $('#downLoading').find('.loading_text').html('下拉刷新'); $('#scroller').css('top', -downLoad_height + 'px'); },500); refreshKey = false; } //当触发上拉加载更多时，需要加载更多数据 if(loadMoreKey){ elem.loadMoreData(); setTimeout(function(){ $('#upLoading').find('img').attr('src', 'imgs/up-vector.png').css('display', 'block'); $('#upLoading').find('.loading_text').html('上拉更多'); },500); loadMoreKey = false; } } }); } } return elem; }); /*var elem = { //全局变量 var window_width = $(document).width(); var window_height = $(document).height(); console.log('window_width===' +window_width +'window_height===' +window_height); init:function(){ alert($('.header h3').text()); alert('init'); } }*/
我的实例源码上传到博客文件里了，需要可以自己下载查看。