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）自定义滚动条
对应CSS文件css.css：
除了旧版本的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对应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;
}
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
