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

随机推荐

PHP 动态调整内存限制
最近公司的一个PHP项目在操作大文件的时候总是抛出这个异常 Fixing PHP Fatal Error: Allowed Memory Size Exhausted 经过一番调试后发现是达到了PHP ...
C# 反射结构体struct的一个坑
今天代码用到了反射赋值,代码是这样写的: var objtype = obj.GetType(); var Fieldinfo = objtype.GetField("I64"); ...
Springboot与Mybatis整合
最近自己用springboot和mybatis做了整合,记录一下: 1.先导入用到的jar包 <dependency> <groupId>org.springframework ...
GCD之after
先介绍下C中的modf函数函数名:modf 头文件:<math.h> 函数原型:double modf(double x, double *ipart) 函数用途:分解x,以得到x的整数 ...
月亮之眼_KEY
[问题描述] 吉儿是一家古董店的老板娘,由于她经营有道,小店开得红红火火.昨天,吉儿无意之中得到了散落民间几百年的珍宝--月亮之眼.吉儿深知"月亮之眼"价值连城:它是由许多珍珠相连 ...
Docker入门之三容器
上一篇博客学习了下镜像,今天来学习容器.容器类似一个手机中的沙盒环境,用来运行app实例.和镜像一样也是对容器的创建.删除.导出等. 由于我买的参考书中的例子好多都是基于linux的,所以我将dock ...
怎样使用自定义标签简化 js、css 引入？
国庆将至,工作兴致全无,来总结点项目里平时不起眼干货. 前端引入 js .css 一般是这样: <script type="text/javascript" src=&quo ...
Power Strings poj2406（神代码）
Power Strings Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 29402 Accepted: 12296 D ...
HDU3336 Count the string
居然一A了,说明对朴素的KMP还是有一定理解. 主要就是要知道next数组的作用,然后就可以计算每个i结尾的满足题意的串个数. #include<cstdio> #include<c ...
ZOJ2105 终于找到错误
ZOJ2105:点击打开链接错误代码 #include<stdio.h> #include<stdlib.h> int q[110]; int main() { int a, ...

iscroll 下拉刷新，上拉加载

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

随机推荐

热门专题