Zepto或jQuery移动端下拉刷新，上拉加载更多插件

最新推荐文章于 2022-05-18 22:17:08 发布

东边的小山

最新推荐文章于 2022-05-18 22:17:08 发布

阅读量1.7k

点赞数

分类专栏： javascript 微信公众平台

微信公众平台同时被 2 个专栏收录

142 篇文章 5 订阅

订阅专栏

javascript

92 篇文章 0 订阅

订阅专栏

	<!doctype html>
	<html lang="zh-cn">
	<head>
	<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
	<title>Zepto或jQuery移动端下拉刷新，上拉加载更多插件 - 素材牛jQuery特效演示</title>
	<!-- UC强制全屏 -->
	<meta name="full-screen" content="yes">
	<!-- QQ强制全屏 -->
	<meta name="x5-fullscreen" content="true">
	<style>
	*{
	margin: 0;
	padding:0;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust:none;
	}
	html{
	font-size:10px;
	}
	body{
	background-color: #f5f5f5;
	font-size: 1.2em;
	}
	.header{
	height: 44px;
	line-height: 44px;
	border-bottom: 1px solid #ccc;
	background-color: #eee;
	}
	.header h1{
	text-align: center;
	font-size: 2rem;
	font-weight: normal;
	}
	.content{
	background-color: #fff;
	}
	.content .item{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align:center;
	-webkit-box-align:center;
	box-align:center;
	-webkit-align-items:center;
	align-items:center;
	padding:3.125%;
	border-bottom: 1px solid #ddd;
	color: #333;
	text-decoration: none;
	}
	.content .item img{
	display: block;
	width: 40px;
	height: 40px;
	border:1px solid #ddd;
	}
	.content .item h3{
	display: block;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	width: 100%;
	max-height: 40px;
	overflow: hidden;
	line-height: 20px;
	margin: 0 10px;
	font-size: 1.2rem;
	}
	.content .item .date{
	display: block;
	height: 20px;
	line-height: 20px;
	color: #999;
	}
	.opacity{
	-webkit-animation: opacity 0.3s linear;
	animation: opacity 0.3s linear;
	}
	@-webkit-keyframes opacity {
	0% {
	opacity:0;
	}
	100% {
	opacity:1;
	}
	}
	@keyframes opacity {
	0% {
	opacity:0;
	}
	100% {
	opacity:1;
	}
	}
	</style>
	<link rel="stylesheet" href="../dist/dropload.css">
	</head>
	<body>
	<div class="header">
	<h1><a href="http://www.sucainiu.com">素材牛 - jQuery特效免费下载</a></h1>
	</div>
	<div class="content">
	<div class="lists"></div>
	</div>
	<!-- jQuery1.7以上或者 Zepto 二选一，不要同时都引用 -->
	<script src="js/zepto.min.js"></script>
	<script src="../dist/dropload.min.js"></script>
	<script>
	$(function(){
	var counter = 0;
	// 每页展示4个
	var num = 4;
	var pageStart = 0,pageEnd = 0;

	// dropload
	$('.content').dropload({
	scrollArea : window,
	loadDownFn : function(me){
	$.ajax({
	type: 'GET',
	url: 'json/more.json',
	dataType: 'json',
	success: function(data){
	var result = '';
	counter++;
	pageEnd = num * counter;
	pageStart = pageEnd - num;

	for(var i = pageStart; i < pageEnd; i++){
	result += '<a class="item opacity" href="'+data.lists[i].link+'">'
	+'<img src="'+data.lists[i].pic+'" alt="">'
	+'<h3>'+data.lists[i].title+'</h3>'
	+'<span class="date">'+data.lists[i].date+'</span>'
	+'</a>';
	if((i + 1) >= data.lists.length){
	// 锁定
	me.lock();
	// 无数据
	me.noData();
	break;
	}
	}
	// 为了测试，延迟1秒加载
	setTimeout(function(){
	$('.lists').append(result);
	// 每次数据加载完，必须重置
	me.resetload();
	},1000);
	},
	error: function(xhr, type){
	alert('Ajax error!');
	// 即使加载出错，也得重置
	me.resetload();
	}
	});
	}
	});
	});
	</script>
	</body>
	</html> dropload.css .dropload-up,.dropload-down{position:relative;height:0;overflow:hidden;font-size:12px;-webkit-transform:translateZ(0);transform:translateZ(0);}.dropload-down{height:50px;}.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{height:50px;line-height:50px;text-align:center;}.dropload-load .loading{display:inline-block;height:15px;width:15px;border-radius:100%;margin:6px;border:2px solid #666;border-bottom-color:transparent;vertical-align:middle;-webkit-animation:rotate 0.75s linear infinite;animation:rotate 0.75s linear infinite;}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);}50%{-webkit-transform:rotate(180deg);}100%{-webkit-transform:rotate(360deg);}}@keyframes rotate{0%{transform:rotate(0deg);}50%{transform:rotate(180deg);}100%{transform:rotate(360deg);}} dropload.min.js !function(a){"use strict";function g(a){a.touches\|\|(a.touches=a.originalEvent.touches)}function h(a,b){b._startY=a.touches[0].pageY,b.touchScrollTop=b.$scrollArea.scrollTop()}function i(b,c){c._curY=b.touches[0].pageY,c._moveY=c._curY-c._startY,c._moveY>0?c.direction="down":c._moveY<0&&(c.direction="up");var d=Math.abs(c._moveY);""!=c.opts.loadUpFn&&c.touchScrollTop<=0&&"down"==c.direction&&!c.isLockUp&&(b.preventDefault(),c.$domUp=a("."+c.opts.domUp.domClass),c.upInsertDOM\|\|(c.$element.prepend('<div class="'+c.opts.domUp.domClass+'"></div>'),c.upInsertDOM=!0),n(c.$domUp,0),d<=c.opts.distance?(c._offsetY=d,c.$domUp.html(c.opts.domUp.domRefresh)):d>c.opts.distance&&d<=2c.opts.distance?(c._offsetY=c.opts.distance+.5(d-c.opts.distance),c.$domUp.html(c.opts.domUp.domUpdate)):c._offsetY=c.opts.distance+.5c.opts.distance+.2(d-2c.opts.distance),c.$domUp.css({height:c._offsetY}))}function j(b){var c=Math.abs(b._moveY);""!=b.opts.loadUpFn&&b.touchScrollTop<=0&&"down"==b.direction&&!b.isLockUp&&(n(b.$domUp,300),c>b.opts.distance?(b.$domUp.css({height:b.$domUp.children().height()}),b.$domUp.html(b.opts.domUp.domLoad),b.loading=!0,b.opts.loadUpFn(b)):b.$domUp.css({height:"0"}).on("webkitTransitionEnd mozTransitionEnd transitionend",function(){b.upInsertDOM=!1,a(this).remove()}),b._moveY=0)}function k(a){a.opts.autoLoad&&a._scrollContentHeight-a._threshold<=a._scrollWindowHeight&&m(a)}function l(a){a._scrollContentHeight=a.opts.scrollArea==b?e.height():a.$element[0].scrollHeight}function m(a){a.direction="up",a.$domDown.html(a.opts.domDown.domLoad),a.loading=!0,a.opts.loadDownFn(a)}function n(a,b){a.css({"-webkit-transition":"all "+b+"ms",transition:"all "+b+"ms"})}var f,b=window,c=document,d=a(b),e=a(c);a.fn.dropload=function(a){return new f(this,a)},f=function(a,b){var c=this;c.$element=a,c.upInsertDOM=!1,c.loading=!1,c.isLockUp=!1,c.isLockDown=!1,c.isData=!0,c._scrollTop=0,c._threshold=0,c.init(b)},f.prototype.init=function(f){var l=this;l.opts=a.extend(!0,{},{scrollArea:l.$element,domUp:{domClass:"dropload-up",domRefresh:'<div class="dropload-refresh">鈫撲笅鎷夊埛鏂�</div>',domUpdate:'<div class="dropload-update">鈫戦噴鏀炬洿鏂�</div>',domLoad:'<div class="dropload-load"><span class="loading"></span>鍔犺浇涓�...</div>'},domDown:{domClass:"dropload-down",domRefresh:'<div class="dropload-refresh">鈫戜笂鎷夊姞杞芥洿澶�</div>',domLoad:'<div class="dropload-load"><span class="loading"></span>鍔犺浇涓�...</div>',domNoData:'<div class="dropload-noData">鏆傛棤鏁版嵁</div>'},autoLoad:!0,distance:50,threshold:"",loadUpFn:"",loadDownFn:""},f),""!=l.opts.loadDownFn&&(l.$element.append('<div class="'+l.opts.domDown.domClass+'">'+l.opts.domDown.domRefresh+"</div>"),l.$domDown=a("."+l.opts.domDown.domClass)),l._threshold=l.$domDown&&""===l.opts.threshold?Math.floor(1l.$domDown.height()/3):l.opts.threshold,l.opts.scrollArea==b?(l.$scrollArea=d,l._scrollContentHeight=e.height(),l._scrollWindowHeight=c.documentElement.clientHeight):(l.$scrollArea=l.opts.scrollArea,l._scrollContentHeight=l.$element[0].scrollHeight,l._scrollWindowHeight=l.$element.height()),k(l),d.on("resize",function(){l._scrollWindowHeight=l.opts.scrollArea==b?b.innerHeight:l.$element.height()}),l.$element.on("touchstart",function(a){l.loading\|\|(g(a),h(a,l))}),l.$element.on("touchmove",function(a){l.loading\|\|(g(a,l),i(a,l))}),l.$element.on("touchend",function(){l.loading\|\|j(l)}),l.$scrollArea.on("scroll",function(){l._scrollTop=l.$scrollArea.scrollTop(),""!=l.opts.loadDownFn&&!l.loading&&!l.isLockDown&&l._scrollContentHeight-l._threshold<=l._scrollWindowHeight+l._scrollTop&&m(l)})},f.prototype.lock=function(a){var b=this;void 0===a?"up"==b.direction?b.isLockDown=!0:"down"==b.direction?b.isLockUp=!0:(b.isLockUp=!0,b.isLockDown=!0):"up"==a?b.isLockUp=!0:"down"==a&&(b.isLockDown=!0,b.direction="up")},f.prototype.unlock=function(){var a=this;a.isLockUp=!1,a.isLockDown=!1,a.direction="up"},f.prototype.noData=function(a){var b=this;void 0===a\|\|1==a?b.isData=!1:0==a&&(b.isData=!0)},f.prototype.resetload=function(){var b=this;"down"==b.direction&&b.upInsertDOM?b.$domUp.css({height:"0"}).on("webkitTransitionEnd mozTransitionEnd transitionend",function(){b.loading=!1,b.upInsertDOM=!1,a(this).remove(),l(b)}):"up"==b.direction&&(b.loading=!1,b.isData?(b.$domDown.html(b.opts.domDown.domRefresh),l(b),k(b)):b.$domDown.html(b.opts.domDown.domNoData))}}(window.Zepto\|\|window.jQuery);