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

随机推荐

java-annotation的简单介绍
package com.yangwei.shop.entity; /** * annotation作用一是进行标识,二是进行约束 * *///必须让它在运行时能够执行@Retention(Reten ...
方法--printStackTrace()
java抛出异常的方法有很多,其中最常用的两个: System.out.println(e),这个方法打印出异常,并且输出在哪里出现的异常,不过它和另外一个e.printStackTrace()方法不 ...
MUI开发记录
最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~ HUuilder使用安卓模拟器安卓模拟器有很多,我这里以夜神模 ...
Microsoft Visual Studio调试监视器（MSVSMON.EXE）未能启动
在启动VS2010项目时,遇到如图所示"Microsoft Visual Studio调试监视器(MSVSMON.EXE)未能启动"的问题. 原因是VS2010安装路径(我的是D: ...
struts标签与jstl标签互换
近期在做struts切换spring mvc时发现代码中使用了大量的struts标签,对常用的struts标签做了总结,首先需要引入 <%@ taglib prefix="c" ...
快速搭建应用服务日志收集系统(Filebeat + ElasticSearch + kibana)
快速搭建应用服务日志收集系统(Filebeat + ElasticSearch + kibana) 概要说明需求场景,系统环境是CentOS,多个应用部署在多台服务器上,平时查看应用日志及排查问题十 ...
Disharmony Trees 树状数组
Disharmony Trees Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Su ...
Java公开课-01.类和对象
一,类和对象的含义 1.类:类是具有相同属性(静态特征)和行为(功能 )的一系列事物的集合. eg:以下俩者是不是类 1)汽车 √ 2)小胖桌子上那个红色的杯子 × 2.对象:被精确限定到一个特殊 ...
Erlang游戏服设计总结
这主要是一年多来,个人从事Erlang游戏服开发中对一些事情的思考. 想到哪说到哪,没有条理可言. 欢迎讨论. 通常Erlang游戏服务的设计涉及到的东东包括如下: 任务系统活动系统公会系统玩法 ...
mysql慢查询分析工具 mysqlsla 安装
概述 mysqlsla 是一款很不错的mysql慢查询日志分析工具,而且简单易用.mysqlsla 是用perl编写的脚本,运行需要perl-DBI和per-DBD-Mysql两模块的支持.mysql ...

iscroll 下拉刷新，上拉加载

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

随机推荐

热门专题