html5触屏手机端上下拉滑动加载更多数据



78 309 104



特效描述:html5触屏 手机端 上下拉滑动 加载更多数据,滑动加载更多,滑动加载数据,html5 滑动加载,滚动加载数据,手机滑动加载 ,移动端 滑动加载更多。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/pullToRefresh.css" />

2. 引入JS

<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/pullToRefresh.js"></script>
<script type="text/javascript" src="js/colorful.js"></script>

3. HTML代码

<div id="wrapper">
	<ul>
		<li>row 10</li>
		<li>row 9</li>
		<li>row 8</li>
		<li>row 7</li>
		<li>row 6</li>
		<li>row 5</li>
		<li>row 4</li>
		<li>row 3</li>
		<li>row 2</li>
		<li>row 1</li>
	</ul>
</div>
<script type="text/javascript">
for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {
	document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}
refresher.init({
	id: "wrapper",//<------------------------------------------------------------------------------------┐
	pullDownAction: Refresh,
	pullUpAction: Load
});
var generatedCount = 0;
function Refresh() {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.querySelector("#wrapper ul");
		el.innerHTML = '';
		for (i = 0; i < 11; i++) {
			li = document.createElement('li');
			li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
			el.insertBefore(li, el.childNodes[0]);
		}
		wrapper.refresh();/****remember to refresh after  action completed! ---yourId.refresh(); ----| ****/
		for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {
			document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
		}
	}, 1000);
}
function Load() {
	setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.querySelector("#wrapper ul");
		for (i = 0; i < 2; i++) {
			li = document.createElement('li');
			li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
			el.appendChild(li, el.childNodes[0]);
		}
		wrapper.refresh();/****remember to refresh after action completed!!!   ---id.refresh(); --- ****/
		for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {
			document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
		}
	}, 1000);
}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 延迟加载 无限加载 延迟 加载 图片延迟加载 图片延迟 图片加载 图片滑动 图片滑块

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到