程序博客网 > 淘宝仓库

iScroll4插件的使用实例

来源：互联网 发布：淘宝仓库 编辑：程序博客网 时间：2024/05/21 22:52
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);}}varstart = $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.0author:cupbluelast 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;}


	
				
		









 淘宝仓库
    		淘宝仓库



原创粉丝点击



		

热门IT博客


数据图表处理软件数据图表处理软件




selenium 调用jsselenium 调用js




淘宝卖家首页装修




皮卡堂刷银币的软件




2016部门决算软件




秒杀 淘宝




和平网络电视安装




js 圆 中心渐变




c语言fprintf函数




网络思想政治教育研究




实践理性批判知乎




pc单机数据清理




克苏鲁神话 知乎




并发编程艺术




淘宝加入不了购物车




java 转换json




淘宝主图尺寸怎么修改




cr1000数据采集器




mac上打开txt文档




通用oa系统数据库设计



		

热门问题
    老师的惩罚
    人脸识别
    我在镇武司摸鱼那些年
    重生之率土为王
    我在大康的咸鱼生活
    盘龙之生命进化
    天生仙种
    凡人之先天五行
    春回大明朝
    姑娘不必设防，我是瞎子
    电车之狼r在哪下载
    电车之狼r中文版下载
    鬼畜r下载
    原始豫r望txt下载
    电车之狼r哪里下载
    韩国r级下载
    战舰少女r下载
    sqlserver2008r2下载
    sql server 2008 r2 下载
    u课通app下载
    u盾证书怎么下载
    m3u8下载器
    m3u8下载
    中兴u880手机刷机包下载
    u880刷机包下载
    u趣商家版app下载
    酷酷m3u8下载安装
    第二书书包txt下载
    艳书网txt下载
    小红书下载安装免费
    搜书王下载
    这书能让你戒烟txt下载
    ios系统还能下载小红书吗
    炫书网下载txt免费下载
    小红书为什么不能下载
    超级书童txt下载
    免费下载小红书
    怎么下载小红书
    小红书2018旧版下载
    艳书网txt免费下载
    当书网下载
    批发书
    心理书
    男人书
    公版书
    记忆书
    健身书
    恋爱书
    心里书
    管理书
    金融书


	










程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里