ios tableview自动无限轮播滚动一个cell一个cell滚动

转载

mob64ca14122c74 2024-07-06 20:52:47

文章标签 iScroll 滚动插件 html css json 文章分类 iOS 移动开发

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
@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;
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。