html5觸屏手機端上下拉滑動加載更多數據



82 324 109



特效描述: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

加群請備注:從官網了解到

老夫子电子