侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 143992 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

iscroll.js实现简单分页

2024-04-04 星期四 / 0 评论 / 0 点赞 / 4 阅读 / 9328 字

前端使用ajax请求后台数据,参数有页数, 上拉加载: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="tex

前端使用ajax请求后台数据,参数有页数,

 

上拉加载:

<!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="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><title>html5+css3实现上拉和下拉刷新</title><script type="text/javascript" src="http://statics.webkfa.com/js/iscroll.js"></script><script type="text/javascript">var myScroll,	pullDownEl, pullDownOffset,	pullUpEl, pullUpOffset,	generatedCount = 0;function pullDownAction () {	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!		var el, li, i;		el = document.getElementById('thelist');		for (i=0; i<3; i++) {			li = document.createElement('li');			li.innerText = 'Generated row ' + (++generatedCount);			el.insertBefore(li, el.childNodes[0]);		}				myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!}function pullUpAction () {	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!		var el, li, i;		el = document.getElementById('thelist');		for (i=0; i<3; i++) {			li = document.createElement('li');			li.innerText = 'Generated row ' + (++generatedCount);			el.appendChild(li, el.childNodes[0]);		}				myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!}function loaded() {	pullDownEl = document.getElementById('pullDown');	pullDownOffset = pullDownEl.offsetHeight;	pullUpEl = document.getElementById('pullUp');		pullUpOffset = pullUpEl.offsetHeight;		myScroll = new iScroll('wrapper', {		useTransition: true,		topOffset: pullDownOffset,		onRefresh: function () {			if (pullDownEl.className.match('loading')) {				pullDownEl.className = '';				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';			} else if (pullUpEl.className.match('loading')) {				pullUpEl.className = '';				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';			}		},		onScrollMove: function () {			if (this.y > 5 && !pullDownEl.className.match('flip')) {				pullDownEl.className = 'flip';				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';				this.minScrollY = 0;			} else if (this.y < 5 && pullDownEl.className.match('flip')) {				pullDownEl.className = '';				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';				this.minScrollY = -pullDownOffset;			} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {				pullUpEl.className = 'flip';				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';				this.maxScrollY = this.maxScrollY;			} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {				pullUpEl.className = '';				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';				this.maxScrollY = pullUpOffset;			}		},		onScrollEnd: function () {			if (pullDownEl.className.match('flip')) {				pullDownEl.className = 'loading';				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';								pullDownAction();	// Execute custom function (ajax call?)			} else if (pullUpEl.className.match('flip')) {				pullUpEl.className = 'loading';				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';								pullUpAction();	// Execute custom function (ajax call?)			}		}	});		setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);}document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);</script><style type="text/css" media="all">body,ul,li {	padding:0;	margin:0;	border:0;}body {	font-size:12px;	-webkit-user-select:none;    -webkit-text-size-adjust:none;	font-family:helvetica;}#header {	position:absolute; z-index:2;	top:0; left:0;	width:100%;	height:45px;	line-height:45px;	background-color:#d51875;	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));	background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);	background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);	padding:0;	color:#eee;	font-size:20px;	text-align:center;}#header a {	color:#f3f3f3;	text-decoration:none;	font-weight:bold;	text-shadow:0 -1px 0 rgba(0,0,0,0.5);}#footer {	position:absolute; z-index:2;	bottom:0; left:0;	width:100%;	height:48px;	background-color:#222;	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));	background-image:-moz-linear-gradient(top, #999, #666 2%, #222);	background-image:-o-linear-gradient(top, #999, #666 2%, #222);	padding:0;	border-top:1px solid #444;}#wrapper {	position:absolute; z-index:1;	top:45px; bottom:48px; left:-9999px;	width:100%;	background:#aaa;	overflow:auto;}#scroller {	position:absolute; z-index:1;/*	-webkit-touch-callout:none;*/	-webkit-tap-highlight-color:rgba(0,0,0,0);	width:100%;	padding:0;}#scroller ul {	list-style:none;	padding:0;	margin:0;	width:100%;	text-align:left;}#scroller li {	padding:0 10px;	height:40px;	line-height:40px;	border-bottom:1px solid #ccc;	border-top:1px solid #fff;	background-color:#fafafa;	font-size:14px;}#myFrame {	position:absolute;	top:0; left:0;}/** * * Pull down styles * */#pullDown, #pullUp {	background:#fff;	height:40px;	line-height:40px;	padding:5px 10px;	border-bottom:1px solid #ccc;	font-weight:bold;	font-size:14px;	color:#888;}#pullDown .pullDownIcon, #pullUp .pullUpIcon  {	display:block; float:left;	width:40px; height:40px;	background:url(http://statics.webkfa.com/img/[email protected]) 0 0 no-repeat;	-webkit-background-size:40px 80px; background-size:40px 80px;	-webkit-transition-property:-webkit-transform;	-webkit-transition-duration:250ms;	}#pullDown .pullDownIcon {	-webkit-transform:rotate(0deg) translateZ(0);}#pullUp .pullUpIcon  {	-webkit-transform:rotate(-180deg) translateZ(0);}#pullDown.flip .pullDownIcon {	-webkit-transform:rotate(-180deg) translateZ(0);}#pullUp.flip .pullUpIcon {	-webkit-transform:rotate(0deg) translateZ(0);}#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {	background-position:0 100%;	-webkit-transform:rotate(0deg) translateZ(0);	-webkit-transition-duration:0ms;	-webkit-animation-name:loading;	-webkit-animation-duration:2s;	-webkit-animation-iteration-count:infinite;	-webkit-animation-timing-function:linear;}@-webkit-keyframes loading {	from { -webkit-transform:rotate(0deg) translateZ(0); }	to { -webkit-transform:rotate(360deg) translateZ(0); }}</style></head><body><div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div><div id="wrapper">	<div id="scroller">		<div id="pullDown">			<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>		</div>		<ul id="thelist">			<li>Pretty row 1</li>			<li>Pretty row 2</li>			<li>Pretty row 3</li>			<li>Pretty row 4</li>			<li>Pretty row 5</li>			<li>Pretty row 6</li>			<li>Pretty row 7</li>			<li>Pretty row 8</li>			<li>Pretty row 9</li>			<li>Pretty row 10</li>			<li>Pretty row 11</li>			<li>Pretty row 12</li>			<li>Pretty row 13</li>			<li>Pretty row 14</li>			<li>Pretty row 15</li>			<li>Pretty row 16</li>			<li>Pretty row 17</li>			<li>Pretty row 18</li>			<li>Pretty row 19</li>			<li>Pretty row 20</li>			<li>Pretty row 21</li>			<li>Pretty row 22</li>			<li>Pretty row 23</li>			<li>Pretty row 24</li>			<li>Pretty row 25</li>			<li>Pretty row 26</li>			<li>Pretty row 27</li>			<li>Pretty row 28</li>			<li>Pretty row 29</li>			<li>Pretty row 30</li>			<li>Pretty row 31</li>			<li>Pretty row 32</li>			<li>Pretty row 33</li>			<li>Pretty row 34</li>			<li>Pretty row 35</li>			<li>Pretty row 36</li>			<li>Pretty row 37</li>			<li>Pretty row 38</li>			<li>Pretty row 39</li>			<li>Pretty row 40</li>		</ul>		<div id="pullUp">			<span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>		</div>	</div></div><div id="footer"></div></body></html>

 

广告 广告

评论区