jQuery手机端上拉刷新下拉刷新加载更多代码

来源:https://www.sucaihuo.com/js/1360.html 2017-02-15 10:32浏览(3166) 收藏

pullToRefresh是两种手机端加载列表数据jQuery代码特效插件,手指滑动手机上拉刷新或者下拉刷新加载更多数据,如果你觉得两种效果太多,可以去掉其中一种。
jQuery手机端上拉刷新下拉刷新加载更多代码
分类:手机特效 > 触屏滑动 难易:
查看演示 下载资源 下载积分: 40 积分

手机上拉下拉刷新JS代码如下

<script>
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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2