<!DOCTYPE html>
<html>
<head>
<meta 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">
<title>iScroll-5 DEMO: Pull to Refresh + Infinite Next Page load</title>
<script type="text/javascript" src="./js/fastclick-jquery.js"></script>
<script type="text/javascript" src="./js/iscroll-probe.js"></script>
<script type="text/javascript">
var items_per_page = 10;
var scroll_in_progress = false;
var myScroll;
var pageNo = 0; //初始化，默认加载页数
function myLoadContent(){
if(pageNo=='end'){
return;
}
if(pageNo == 1){
page = page1;
list = page.pageData;
renderRow(list);
$('#wrapper').css({left: 0});
if(list.length >= items_per_page){
//初始化scoller
initScoller();
}else{
$('#wrapper .pullUp span').hide();
}
}
if(pageNo == 2){
page = page2;
list = page.pageData;
renderRow(list);
myScroll.refresh();
}
if(pageNo >=3){
pageNo='end'
}
}
function renderRow(list){
for(var i=0;i<list.length;i++){
var item = list[i];
$('#wrapper > #scroller > ul').append('<li>数据-'+item.id+'</li>');
}
}
function initScoller(){
pullUpEl = document.querySelector('#wrapper .pullUp');
if (pullUpEl) {
pullUpOffset = pullUpEl.offsetHeight;
} else {
pullUpOffset = 0;
}
var offset = pullUpOffset;
myScroll = new IScroll('#wrapper', {
probeType: 1,
tap: true,
click: false,
preventDefaultException: {tagName: /.*/},
mouseWheel: true,
scrollbars: true,
fadeScrollbars: true,
interactiveScrollbars: false,
keyBindings: false,
deceleration: 0.0002,
startY: (parseInt(offset) * (-1))
});
myScroll.on('scrollStart', function () {
scroll_in_progress = true;
});
myScroll.on('scroll', function () {
if(pageNo=='end'){
$('.pullUp').addClass('loading').html('<span class="pullUpIcon"> </span><span class="pullUpLabel">已经是最后一条了</span>');
return;
}
scroll_in_progress = true;
console.log("this.y="+this.y+";this.maxScrollY="+this.maxScrollY);
var testF1 = (this.y <= (this.maxScrollY + 200));
var testF2 = !pullUpEl.className.match('loading');
var r = testF1 && pullUpEl && testF2 ;
console.log("testF1="+testF1+";testF2="+testF2+";r="+r);
if(r) {
$('.pullUp').addClass('loading').html('<span class="pullUpIcon"> </span><span class="pullUpLabel">加载数据中。。。</span>');
pageNo ++;
myLoadContent();
// pullUpAction();
}
});
myScroll.on('scrollEnd', function () {
console.log('scroll ended');
setTimeout(function () {
scroll_in_progress = false;
}, 100);
$(pullUpEl).removeClass('loading').html('');
});
}
//初始化数据
function loaded() {
//load_content();
pageNo = 1;
myLoadContent();
}
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
var page1 = {pageNo:0,pageSize:10,
pageData:[
{id:1,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:2,createdAt:'2018-01-10 10:10',action:'取款成功',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款成功'},
{id:3,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:4,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:5,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:6,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:7,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:8,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:9,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:10,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'}
]
}
var page2 = {pageNo:1,pageSize:10,
pageData:[
{id:11,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:12,createdAt:'2018-01-10 10:10',action:'取款成功',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款成功'},
{id:13,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:14,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:15,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:16,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:17,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:18,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:19,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:20,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'}
]
}
</script>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body, ul, li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}
#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 9999px; /* Not a must - can be 0 - but it makes the appearance of the content a bit nicer */
width: 100%;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#scroller li {
padding: 0 10px;
height: 80px;
line-height: 80px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
.pullDownLabel, .pullUpLabel {
color: #999
}
.pullDown, .pullUp {
background: #fff;
height: 40px;
line-height: 40px;
font-weight: bold;
font-size: 0.8em;
color: #888
}
.pullDown .pullDownIcon, .pullUp .pullUpIcon {
display: block;
float: left;
opacity: 0.4;
width: 40px;
height: 40px;
background: url(pull_to_refresh.png) 0 0 no-repeat;
-webkit-background-size: 40px 80px;
-ms-background-size: 40px 80px;
background-size: 40px 80px;
-webkit-transition-property: -webkit-transform;
-ms-transition-property: -webkit-transform;
-webkit-transition-duration: 250ms;
-ms-transition-duration: 250ms
}
.pullDown .pullDownIcon {
-webkit-transform: rotate(0deg) translateZ(0);
-ms-transform: rotate(0deg) translateZ(0)
}
.pullUp .pullUpIcon {
-webkit-transform: rotate(-180deg) translateZ(0);
-ms-transform: rotate(-180deg) translateZ(0)
}
.pullDown.flip .pullDownIcon {
-webkit-transform: rotate(-180deg) translateZ(0);
-ms-transform: rotate(-180deg) translateZ(0)
}
.pullUp.flip .pullUpIcon {
-webkit-transform: rotate(0deg) translateZ(0);
-ms-transform: rotate(0deg) translateZ(0)
}
.pullDown.loading .pullDownIcon, .pullUp.loading .pullUpIcon {
background-position: 0 100%;
-webkit-transform: rotate(0deg) translateZ(0);
-ms-transform: rotate(0deg) translateZ(0);
-webkit-transition-duration: 0ms;
-ms-transition-duration: 0ms;
-webkit-animation-name: loading;
-ms-animation-name: loading;
-webkit-animation-duration: 1s;
-ms-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-ms-animation-timing-function: linear
}
@-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg) translateZ(0)
}
to {
-webkit-transform: rotate(360deg) translateZ(0)
}
}
@-ms-keyframes loading {
from {
-ms-transform: rotate(0deg) translateZ(0)
}
to {
-ms-transform: rotate(360deg) translateZ(0)
}
}
</style>
</head>
<body onload="loaded()">
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<!--
<div class="pullDown">
<span class="pullDownIcon"> </span>
<span class="pullDownLabel">Pull down to refresh...</span>
</div>
-->
<ul></ul>
<div class="pullUp"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
分享到：
相关推荐
iscoll 是一个专门为实现这种功能而设计的组件，它允许用户在滚动到列表顶部时触发下拉刷新操作，滚动到底部时触发上拉加载更多数据的操作。这个经典demo 提供了一个简单易懂的实现方式，方便开发者快速集成到自己的...
4. **动态内容加载**：iscoll可以配合无限滚动或懒加载实现，当用户滚动到页面底部时自动加载更多内容。 5. **自定义滚动条**：iscoll允许自定义滚动条样式，与网页设计更加协调。 6. **兼容性广泛**：iscoll不仅...
上拉加载更多则是在用户滚动到底部时加载更多内容的功能，通常用于分页显示大量数据。iscroll5同样通过监听事件，如`pullingup`，来实现这一特性。当用户接近或达到滚动容器的底部时，触发此事件，开发者可以在这时...
三方定制系统的设备（如小米，魅族）以及将页面在android应用中打开都会造成滑动非常的卡的现象。这时只要改改iScoll4的源码即可，此版本为修改后的版本
使用经典插件iScroll4稍作封装，采用ajax请求数据，实现移动端列表页的功能; 1.下拉刷新当前列表页数据； 2.上滑加载更多列表数据； iScroll4简介： iScroll 4 这个版本完全重写了iScroll这个框架的原始代码...
- `boolean isColl;` 标志变量用于指示是否发生碰撞。 5. **背景层绘制：** - `TiledBgtbg;` 和 `TiledLayertl;` 使用`TiledLayer`来创建和管理游戏背景，这对于大型游戏世界特别有用，可以显著提高性能。 6. ...
10. `iscoll.m`：这是一个辅助函数，用于检查单个点是否在障碍物内。 在这个实现中，MATLAB的可视化功能被充分利用，帮助用户直观地看到机器人的工作环境、障碍物以及规划出的路径。遗传算法与PRM的结合，使得路径...