iScroll4插件的使用实例
iScroll是Matteo Spinelli开发的一个滚动插件，使用原生js编写，其不依赖与任何js框架。iScroll 4 完全重写了iScroll这个框架的原始代码。旨在解决移动webkit系浏览器的区域滚动问题，兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。最新版本为iscroll4。 目前正在开发iscroll5还未发布。iscroll 4.2版本兼容：iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile.
除了旧版本的iScroll的特性以外，iScroll 4还包括如下的特性：
（1）缩放（Pinch/Zoom）
（2）拉动刷新（Pull up/down to refresh）
（3）速度和性能提升
（4）精确捕捉元素
（5）自定义滚动条
最近的项目需要一个iOS页面，这里就采用了iScroll4来实现。下面是项目实例代码：
html文档conlist.html源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no" >
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0,
pullcount=0;
function msgalert(msg, pos){
//$('#swrap').css('display','-webkit-box');
$(".pull" + pos).css('background-image','none').text(msg);
setTimeout(function(){
$(".pull" + pos).fadeOut(500);
},1000);
}
function loadImg(){
var transform = $('#scroller').css('transform');
var aStr = transform.substring(7,transform.length-1);
var aArr = new Array();
aArr = aStr.split(',');
var aScroll = parseInt(aArr[5]);
var $scroller = $('#scroller'),
mh = $('#wrapper').height() +50;
$scroller.find('img').each(function(){
var i = {
obj:this,
tag:this.nodeName.toLowerCase,
url:$(this).attr('src'),
rurl:$(this).attr('dynamic-src'),
offsetH:$(this).offset().top
}
if(!i.url && (i.offsetH<=mh)){
$(this).attr('src',i.rurl);
}
})
}
function loadAjax(url,data,callback){
$.ajax({
url:url,
type:'post',
dataType:'json',
data:data,
success:callback,
error: function(XMLHttpRequest, textStatus, errorThrown) {
//msgalert('服务器出错~', 'DownLabel');
},
})
}
function dataProcess(data,html,obj){
html = '';
for(var i = 0, len = data.comments.length; i < len; i++){
li = data.comments[i];
html += '<div class="comitem">' +
'<div class="comitem-para">' +
'<div class="para-by"><em>' + li.userName + '</em><span>' + li.commentDate + '</span></div>' +
'<div class="para-con">' + li.content + '</div>' +
'</div>' +
'</div>';
}
obj.append(html);
//loadImg();
}
function pullDownAction () {
var html = '',$el=$('#thelist');
//$('#pullUp').hide();
var url = 'http://192.168.4.20:8080/';//上拉刷新数据
var purl = window.location.href;
var pIndex = purl.indexOf('aid=');
if(pIndex == -1){
return;
}else{
var aid = purl.substring(pIndex+4);
var aIndex = aid.indexOf('&');
if(aIndex>-1){
aid = aid.substring(0,aIndex);
}
}
var posts = {"aid":aid,"start":0};
loadAjax(url,posts,function(json){
if(json.statuscode == 1){
$el.html(html);
dataProcess(json,html,$el);
pullcount=0;
}
else if(json.statuscode == 2){
msgalert('没有数据了，已加载完成！', 'DownLabel');
}else msgalert('刷新数据出错了，请重试~', 'DownLabel');
//$('#pullUp').show();
myScroll.refresh();
})
}
function pullUpAction () {
var html='',$el = $('#thelist');
var purl = window.location.href;
var pIndex = purl.indexOf('aid=');
if(pIndex == -1){
return;
}else{
var aid = purl.substring(pIndex+4);
var aIndex = aid.indexOf('&');
if(aIndex>-1){
aid = aid.substring(0,aIndex);
}
}
var start = $el.children('.comitem').length,number = 3,
data = {start:start,aid:aid};
//data = {start:start,number:number,aid:aid};
var url = 'http://192.168.4.20:80/
appweb
';//下拉加载数据loadAjax(url,data,function(json){if(json.statuscode == 2){if(pullcount==0){msgalert('已经全部加载！', 'UpLabel');pullcount =1;}$('#pullUp').hide();}else if(json.statuscode == 1){dataProcess(json,html,$el);}else{msgalert('加载数据出错了，请重试~', 'UpLabel');//$('#pullUp').hide();} myScroll.refresh();});}function loaded() {pullDownEl = document.getElementById('pullDown');pullDownOffset = pullDownEl.offsetHeight;pullUpEl = document.getElementById('pullUp');pullUpOffset = pullUpEl.offsetHeight;pullDownAction();var documentHeight = document.documentElement.clientHeight + 50;$('#thelist').css('min-height',documentHeight+'px');myScroll = new iScroll('wrapper', {topOffset:pullDownOffset,onRefresh: function () {if (pullDownEl.className.match('loading')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';} else if (pullUpEl.className.match('loading')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';}},onScrollMove: function () {if (this.y > 5 && !pullDownEl.className.match('flip')) {pullDownEl.className = 'flip';pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放立即刷新...';this.minScrollY = 0;} else if (this.y < 5 && pullDownEl.className.match('flip')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';this.minScrollY = -pullDownOffset;} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {pullUpEl.className = 'flip';pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放立即刷新...';this.maxScrollY = this.maxScrollY;} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';this.maxScrollY = pullUpOffset;}},onScrollEnd: function () {if (pullDownEl.className.match('flip')) {pullDownEl.className = 'loading';pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';pullDownAction();} else if (pullUpEl.className.match('flip')) {pullUpEl.className = 'loading';pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';pullUpAction();}}});setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);}document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);</script><link media="all" rel="stylesheet" type="text/css" href="css/css.css" ><link media="all" rel="stylesheet" type="text/css" href="css/iscroll.css" ><title>评论列表页面</title></head><body><div class="wrapper"><div class="comment clearfix"><div class="combar"><span class="combar-tit">全部评论</span><!--<a class="combar-goto">返回</a>--></div><div id="wrapper" class="comlist"><div id="scroller"><div id="pullDown"><span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span></div><div id="thelist" class="clearfix"><div class="comitem"><div class="comitem-para"><div class="para-by"><em>热带小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不馈是TOP10，都是很棒的游戏，火线追击好爽啊~~推荐！</div></div></div><div class="comitem"><div class="comitem-para"><div class="para-by"><em>大海啊全都是水</em><span>2013-07-17 12:28</span></div><div class="para-con">跑跑卡丁车的界面操作等与PC版类似，最让人惊讶的是赛车的操控性和反应度都十分灵敏。对新手，跑跑卡丁车会比其他手机赛车游戏更难以控制和把握。</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>热带小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不馈是TOP10，都是很棒的游戏，火线追击好爽啊~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>热带小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不馈是TOP10，都是很棒的游戏，火线追击好爽啊~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>愤怒的小鸟</em><span>2013-07-17 12:28</span></div><div class="para-con">愤怒的小鸟愤怒的小鸟愤怒的小鸟愤怒的小鸟愤怒的小鸟~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>玩机宝典</em><span>2013-07-17 12:28</span></div><div class="para-con">玩机宝典玩机宝典玩机宝典玩机宝典玩机宝典玩机宝典~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>热带小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不馈是TOP10，都是很棒的游戏，火线追击好爽啊~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>大海啊全都是水</em><span>2013-07-17 12:28</span></div><div class="para-con">跑跑卡丁车的界面操作等与PC版类似，最让人惊讶的是赛车的操控性和反应度都十分灵敏。对新手，跑跑卡丁车会比其他手机赛车游戏更难以控制和把握。</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>热带小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不馈是TOP10，都是很棒的游戏，火线追击好爽啊~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>热带小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不馈是TOP10，都是很棒的游戏，火线追击好爽啊~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>愤怒的小鸟</em><span>2013-07-17 12:28</span></div><div class="para-con">愤怒的小鸟愤怒的小鸟愤怒的小鸟愤怒的小鸟愤怒的小鸟~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>玩机宝典</em><span>2013-07-17 12:28</span></div><div class="para-con">玩机宝典玩机宝典玩机宝典玩机宝典玩机宝典玩机宝典~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>愤怒的小鸟</em><span>2013-07-17 12:28</span></div><div class="para-con">愤怒的小鸟愤怒的小鸟愤怒的小鸟愤怒的小鸟愤怒的小鸟~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>玩机宝典</em><span>2013-07-17 12:28</span></div><div class="para-con">玩机宝典玩机宝典玩机宝典玩机宝典玩机宝典玩机宝典~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>大海啊全都是水</em><span>2013-07-17 12:28</span></div><div class="para-con">跑跑卡丁车的界面操作等与PC版类似，最让人惊讶的是赛车的操控性和反应度都十分灵敏。对新手，跑跑卡丁车会比其他手机赛车游戏更难以控制和把握。</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>热带小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不馈是TOP10，都是很棒的游戏，火线追击好爽啊~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>热带小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不馈是TOP10，都是很棒的游戏，火线追击好爽啊~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>愤怒的小鸟</em><span>2013-07-17 12:28</span></div><div class="para-con">愤怒的小鸟愤怒的小鸟愤怒的小鸟愤怒的小鸟愤怒的小鸟~~推荐！</div></div></div><div class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>玩机宝典</em><span>2013-07-17 12:28</span></div><div class="para-con">玩机宝典玩机宝典玩机宝典玩机宝典玩机宝典玩机宝典~~推荐！</div></div></div><div class="comitem border-btnone"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="这里是人物昵称"></div>--><div class="comitem-para"><div class="para-by"><em>大海啊全都是水</em><span>2013-07-17 12:28</span></div><div class="para-con">跑跑卡丁车的界面操作等与PC版类似，最让人惊讶的是赛车的操控性和反应度都十分灵敏。对新手，跑跑卡丁车会比其他手机赛车游戏更难以控制和把握。</div></div></div></div><div id="pullUp"><span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span></div></div></div><div class="fixbar"><div><div class="fixstretch"></div><a href="http://game.feiliu.com/qianghaoqi/pages/article.html" class="btn ret"><b></b></a><a href="http://game.feiliu.com/qianghaoqi/wansha.php?m=2&pid=1157&plat=ios" class="btn reply"><b></b></a></div></div></div></div></body></html>
对应CSS文件css.css：
@charset "utf-8";
/*--------------------------------------------------------------------
version: 1.0
author: cupblue
last update: 2013-07-18
---------------------------------------------------------------------*/
/*reset*/
html,body,div,h1,h2,h3,h4,h5,h6,p,span,em,cite,del,a,img,ul,li,ol,button,input,textarea,dl,dt,dd,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
ol,ul{list-style:none;}
body{font:12px/1.5 Arial,Verdana,Lucida,Helvetica,simsun,sans-serif;text-align:left;color:#000;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
em{font-style:normal;}
input{font-size:12px; color:#000;outer:none;outline:none;}
table{border-collapse:collapse;border-spacing:0;border:0 none;}
a{cursor:pointer;text-decoration:none;outline:none;color:#000;-webkit-transition:all .2s linear;transition:all .2s linear;-moz-transition:all .2s linear;-ms-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;}
button{cursor:pointer;}
a:hover{text-decoration:underline;color:#000;}
input, select, form img, button,label,textarea{font-size:12px;vertical-align:middle; font-family:Tahoma;color:#000;}
/*global*/
a.untransition{-webkit-transition:none;transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
.clearfix{zoom:1;}
.clearfix:after{content:"";display:block;height:0;line-height:0;clear:both;visibility:hidden;}
/*article*/
body{
font:14px/1.5 'Apple LiGothic Medium','Apple LiSung Light', 'Times New Roman', Times;
color: #333;
}
.wrapper {
width:100%;
margin:0 auto;
}
.content{
padding:25px 15px 10px;
}
.wrapper .tit{
text-align:center;
font-weight:900;
font-size:18px;
margin:10px auto;
}
.wrapper .subtit{
color:#787878;
font-size:12px;
text-align:center;
margin:10px auto;
}
.wrapper .subtit span{
margin-right:10px;
}
.wrapper p{
padding:5px 0;
text-indent:2em;
color:#333;
}
.wrapper p.img{
text-align:center;
margin:0 auto;
text-indent:0;
}
.wrapper .img img{
width:240px;
height:160px;
}
.content .inner{
overflow:hidden;
height:480px;
}
.content .card{
background:#f3f3f3;
position:relative;
padding:10px 0;
margin:5px auto;
}
.content .card .moreabout{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}
.content .flag{
position:absolute;
top:-8px;
left:5px;
background:url("../images/clip.png") no-repeat scroll 0 0 transparent;
width:17px;
height:19px;
background-size: 17px 19px;
}
.content .icon{
position:absolute;
top:10px;
left:20px;
}
.content .icon,.content .icon img{
width:72px;
height:72px;
overflow:hidden;
}
.content .info{
padding-left:100px;
min-height:72px;
}
.info .card-tit{
color:#333;
padding:5px 0;
font-size:15px;
}
.info .card-detail{
color:#666;
line-height:1.5;
padding-right:5px;
font-size:12px;
}
.info .card-detail span{
margin-right:10px;
word-wrap:break-word;
word-break:break-all;
}
.content .toggle{
color:#999;
text-align:center;
width:100%;
margin:10px auto;
font-size:12px;
}
.toggle i{
width:20%;
border-top:1px solid #e4e4e4;
display:inline-block;
margin:0 15px ;
vertical-align:middle;
}
.comment{
margin-bottom:10px;
}
.comment .combar{
height:25px;
line-height:25px;
border-bottom:2px solid #efefef;
position:absolute;
left:0;
top:0;
width:100%;
z-index:2;
}
.combar span, .combar a{
font-weight:900;
letter-spacing:1px;
font-size:13px;
padding:0 5px;
}
.combar .combar-tit{
position:absolute;
left:15px;
color:#333;
border-bottom:2px solid #ce0000;
outline:none;
}
.combar .combar-togg{
position:absolute;
right:0;
/*background:#ce0000;
padding:0 30px;*/
background:url("../images/tog.png") no-repeat scroll 0 0 transparent;
height:25px;
width:76px;
background-size:76px 25px;
}
.combar .combar-goto{
position:absolute;
right:0;
background:#ce0000;
padding:0 15px;
height:25px;
line-height:25px;
color:#fff;
}
.combar-togg > *{
display:inline-block;
}
.combar-togg span{
color:#fff;
}
.combar-togg b{
width:23px;
height:23px;
background:url("../images/bg.png") no-repeat scroll -5px -58px transparent;
}
.combar-togg i{
width:14px;
height:14px;
background:url("../images/bg.png") no-repeat scroll -5px -102px transparent;
}
.comlist{
margin:5px auto;
}
.comitem{
position:relative;
//float:left;
//width:100%;
border-bottom:1px solid #eee;
min-height:40px;
padding:5px 10px;
//background-color:#FAFAFA;
}
.comitem .comitem-pic{
width:40px;
height:40px;
margin:5px 10px 5px 0px;
overflow:hidden;
float:left;
display:inline-block;
}
.comitem-pic img{
width:40px;
height:40px;
}
.comitem .comitem-para{
display:inline-block;
/*width:78%;*/
width:100%;
}
.comitem .para-by{
color:#999;
font-size:12px;
padding:2px 0;
}
.comitem .para-by em{
margin-right:20px;
}
.comitem .para-con{
color:#444;
font-size:14px;
}
.border-btnone{
border-bottom:0;
}
.fixbar{
position:absolute;
bottom:0;
left:0;
height:50px;
width:100%;
z-index:2;
}
.fixbar > div{
padding:0 10px;
}
.fixbar .fixstretch{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-image:-moz-linear-gradient(center top , #fff, #343434);
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#343434));
background-image:-o-linear-gradient(top, #fff, #343434);
opacity:0.3;
}
.fixbar a{
display:block;
width:40px;
height:40px;
background-color:#7f7f7f;
border-radius:25px;
position:absolute;
top:0;
cursor:pointer;
outline:none;
}
.fixbar a b{
display:block;
width:40px;
height:40px;
}
.fixbar a.ret{
left:15px;
}
.fixbar a.reply{
right:30px;
}
.fixbar a.ret b{
background:url("../images/back.png") no-repeat scroll center center transparent;
background-size:16px 16px;
}
.fixbar a.reply b{
background:url("../images/edit.png") no-repeat scroll center center transparent;
background-size:16px 16px;
}
