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 ...

随机推荐

Python跨目录调用模块
目的就是将脚本执行的根目录加入环境变量. #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = '人生入戏' import os,sy ...
python 实现注册程序
本文介绍用python实现一个模拟注册的程序,详细需求如下: # 写一个注册的程序,输入username,密码,密码确认,输入的账号和密码不能为空,两次输入密码必须一致,用户名不能重复,错误次数4次# ...
Hadoop的safeMode
当集群启动的时候,会首先进入到安全模式.系统在安全模式下,会检查数据块的完整性.假设我们设置的副本数(即参数dfs.replication)是5,那么在dataNode上就应该有5个副本存在,假设只存 ...
关于IOS的屏幕适配（iPhone）——Auto Layout和Size Classes
Auto Layout和Size Classes搭配使用极大的方便了开发者,具体如何使用Auto Layout和Size Classes大家可以参考其他文章或者书籍,这里只提一点,在我们设置Size ...
angular directive自定义指令
先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...
Python 接口测试（二）
三:http状态码含义(来源于w3school): 状态码: 1xx: 信息消息: 描述: 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客 ...
解决外部编辑器修改Eclipse文件延迟刷新【补充】
在之前的文章,使用gulp解决外部编辑器修改Eclipse文件延迟刷新,原理是用gulp把更改过的项目文件直接复制一份到Tomcat的webapp.root下, 现在补充另外一种方法,双击Server ...
再起航，我的学习笔记之JavaScript设计模式30(简单模板模式)
简单模板模式概念介绍简单模板模式(Simple template): 通过格式化字符串拼凑出视图避免创建视图时大量节点操作,优化内存开销. 创建模板在实际的业务中如果我们需要进行前后台交互,或多 ...
通过修改 LayoutInflater，全局替换字体！！！
序在 Android 下使用自定义字体已经是一个比较常见的需求了,最近也做了个比较深入的研究. 那么按照惯例我又要出个一篇有关 Android 修改字体相关的文章,但是写下来发现内容还挺多的,所以我 ...
vscode 调试.net core 2.0 输出乱码解决方法
之前在vscode上调试.net core 2.0项目时输出窗口一直是乱码,查了很多资料无法解决最终在github找到了解决办法 -> https://github.com/OmniSha ...

iscroll 下拉刷新，上拉加载

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

随机推荐

热门专题