iscroll 下拉刷新，上拉加载

新手，直接贴代码了

<!DOCTYPE html>
<html class="">
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="css/amazeui.min.css" />
<link rel="stylesheet" href="css/acjl.css" />
<link rel="stylesheet" href="css/ydac_pm.css" />
<link href="css/mobiscroll.custom-2.15.1.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mobiscroll.custom-2.15.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth/20+"px";
</script>

</style>

<title>iscroll 下拉刷新，上拉加载</title>
</head>
<body id="receivableSheet">
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
</div>
<ul class="sheet" id="thelist">
<li class="title">
<span class="name">姓名</span>
<span class="receivable">待回款</span>
<span class="receivableed">已回款</span>
</li>
<li class="list">
<span class="name">李大国</span>
<span class="receivable">2000000.00元</span>
<span class="receivableed">4000000.00元</span>
</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多</span>
</div>
</div>
</div>
<div class="noDate" style="display: none;" >暂无数据</div>
<script src="js/iscroll.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,liNum,
generatedCount = 0;
console.log("高度为"+$("#wrapper").height())
liNum=parseInt($("#wrapper").height()/40);//每条li的高度为40，一页面显示的li的个数
console.log("列表的数目"+liNum)
listLoad();
function listLoad () {
setTimeout(function () { // 数据加载后启动定时器，刷新数据
for (i=0; i<liNum-1; i++) {
$("#thelist").append($($(".list")[0]).clone())//首页显示的数据，不用管
}
myScroll.refresh(); //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 100); // <-- Simulate network congestion, remove setTimeout from production!
}
/**
* 下拉刷新（自定义实现此方法）
* myScroll.refresh(); // 数据加载完成后，调用界面更新方法
*/
function pullDownAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
myScroll.refresh(); //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}

/**
* 滚动翻页（自定义实现此方法）
* myScroll.refresh(); // 数据加载完成后，调用界面更新方法
*/
function pullUpAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
for (i=0; i<5; i++) {
li = document.createElement('li');
li.innerText = '添加三冰 ' + (++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!
}

/**
* 初始化iScroll控件
*/

function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;

myScroll = new iScroll('wrapper', {
scrollbarClass: 'myScrollbar', /* 重要样式 */
useTransition: false,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
}
},
//滚动时
onScrollMove: function () {
pullUpEl.className = '';
console.log("滚动时"+this.y)
if (this.y > 5 && !pullDownEl.className.match('flip')) {//主要是判断下拉状态，给下拉加Class“flip”,下拉幅度达到显示pullDownOffset的高度，显示内容为松手开始更新..
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
this.minScrollY = 0;//显示信息
console.log(this.y+"下拉事件")
} else if (this.y < 5 && pullDownEl.className.match('flip')) {//主要是判断下拉状态，给下拉加Class“flip”,下拉幅度未达到显示pullDownOffset的高度，显示内容为下拉刷新...
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownOffset;//需要下拉才能看见提示信息
} else{ //除了下拉状态，我(暂时)判定为都是上拉状态，满足条件后在进行加载，
// 上拉了
pullUpEl.className = 'flip';
}
},

//离开滚动
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {//判断下拉的class名，判定下拉状态，进行通过加Calss名 loading 进行c3动画效果，执行下拉更新
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {//判定为上拉状态，在进行判断，执行
console.log("满足条件了")
console.log(window.screen.height)
console.log($("#pullUp").offset().top)//获得显示上拉框的位移高度
if($("#scroller li").length>=22){//因为我的数据自己加载不确定，我给了个值，根据个人情况进行修改，不进行上拉加载
this.maxScrollY = this.maxScrollY;//表示下拉框的信息显示在页面，
pullUpEl.className = '';//消除上拉状态的判定条件，及C3动效
$("#pullUp .pullUpIcon").hide()//隐藏上拉状态信息图片
pullUpEl.querySelector('.pullUpLabel').innerHTML = '已经到底了!';
}else if((window.screen.height-20)>$("#pullUp").offset().top){//因为我的数据做了margin值，所以减了20的值，上滑如果$("#pullUp")显示，进行加载

if($("#scroller li").length>=22){//进行双重保险
his.maxScrollY = this.maxScrollY;//显示在页面
pullUpEl.className = '';
$("#pullUp .pullUpIcon").hide()
pullUpEl.querySelector('.pullUpLabel').innerHTML = '已经到底了!';
}
else{
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
pullUpEl.className = 'loading';
pullUpAction();
}

}
}
}
});

setTimeout(function () { document.getElementById('wrapper').style.left = "0.8rem"; }, 800);
}

//初始化绑定iScroll控件
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

</script>
</body>
</html>

一些细节自己研究的，感觉有些难点，所以记录一下，如有异议，欢迎大伙一起交流，QQ664726168,备注：H5

iscroll 下拉刷新，上拉加载的更多相关文章

Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
ListView实现Item上下拖动交换位置并且实现下拉刷新上拉加载更多
ListView实现Item上下拖动交换位置并且实现下拉刷新上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
[ionic开源项目教程] - 第7讲实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
第7讲实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

随机推荐

sql server 把数据复制成脚本文件
问题描述:想把一个数据库里的表和字段复制到另一个数据库里: 方法一:a.生成脚本文件选择数据库右键->任务->生成脚本: b. 选择特定的数据库对象->下一步: c.高级-> ...
Eclipse Oxygen 解决自动导包的问题
换成了 Eclipse 的Oxygen 版本 , 发现之前好用的自动导包功能不能用了 (Ctrl+Shift+O) 再网上看资料上面说将 In Windows 替换为Editing Java ...
Spring连接池的常用配置
1.连接池概述数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库连接池正 ...
深入理解计算机系统chapter2
---恢复内容开始--- 整数表示: 反码和原码都会有正零和负零有符号整数和无符号整数之间的转换反之扩展一个数字的位级表示截断操作无符号加法的益处补码的加法规格化的值:E=e-bias ...
安装myeclipse2015 stable 3.0破解之后发生出现SECURITY ALERT:iNTEGRITY CHECK ERROR然后闪退解决方案
安装好myeclipse2015 stable以后也一步步按着破解文件的步骤来进行.打开myEclipse---->Subscription information--->Subscrip ...
基于Apache axis2开发Java Web服务
1.安装配置axis2环境 1)下载axis2-1.4.1-war(发布webservice)和axis2-1.4.1-bin.zip(webservice调用使用的各种包) 下载好后把axis2-1 ...
bzoj3224 普通平衡树（c++vector）
Tyvj 1728 普通平衡树 2014年8月23日6,4365 Description 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作:1. 插入x数2. 删除x数(若有 ...
从DDD开始说起
前言从13年接触DDD之后开始做应用架构已经整整四个年头. 四年里关于DDD的感触良多,慢慢有了一些心得. 关于DDD的介绍已经有很多的文章和书籍,这里我推荐三本最重要的书籍. <领域驱动设计 ...
VB.NET 打开窗体后关闭自己
第一:要实例化打开的窗体 Dim bb As New frm_Main 第二:打开窗体 show 第三:释放自身 Finalize() '赋值另一窗体的控件值,先实例化,再进行操作 Dim bb ...
netsh用法
netsh(Network Shell) 是一个windows系统本身提供的功能强大的网络配置命令行工具. 导出配置脚本:netsh -c interface ip dump > c:\inte ...

iscroll 下拉刷新，上拉加载

iscroll 下拉刷新，上拉加载的更多相关文章

随机推荐

热门专题