iscroll4实现下拉刷新和下拉加载更多
开发项目中，需要用到下拉刷新，开始本来打算自己写这个效果的。但是，自己写的效果不流畅，显得死板。通过查询相关资料，发现了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');
}
}*/
我的实例源码上传到博客文件里了，需要可以自己下载查看。
