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]
是这样的:俩个月前做的一个小功能,今天经理突然问我这个'清除复投记录'功能是不是我做的,我说是,很久以前了.他说昨天一个客户找过来了,后台把人家的复投记录清除掉了,不知道何时清除的,我记得当时做的时候 ...
微信小程序语音识别服务搭建全过程解析（项目开源在github）
silk v3录音转olami语音识别和语义处理的api服务(ubuntu16.04服务器上实现) ## 重要的写在前面重要事项一: 目前本文中提到的API已支持微信小程序录音文件格式:silk v ...
APPScan安装与使用教程
一.安装 1.右键安装文件,以管理员身份运行,如下图所示: 2.点击[确定] 3.点击[安装] 4.选择:我接受许可协议中单位全部条款,点击[下一步] 5.点击[安装]到该目录 6.如果需求扫描Web ...
jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）
banner图的滚动效果动画最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...
M方法
ThinkPHP函数详解:M方法 M方法用于实例化一个基础模型类,和D方法的区别在于:1.不需要自定义模型类,减少IO加载,性能较好:2.实例化后只能调用基础模型类(默认是Model类)中的方法:3. ...
electron入门心得
前言前端开发桌面程序这个概念已经出现有一段时间了,这项技术也已经走向成熟,Github上nw和光electron的star就差不多有10w颗星了,github也衍生出了很多开源的桌面项目俨然成了一个 ...
pycharm（windows）安装及其设置中文菜单
pycharm(windows)安装及其设置中文菜单 1.下载在官网(http://www.jetbrains.com/pycharm/download/#section=windows)进行下载 ...
关于Java里面File类创建txt文件重复？？？
private JButton getOpenButton() { if (openButton == null) { openButton = new JButton(); openButton.s ...
Android 导入引用第三方项目
环境:Android Studio 1.4 1 以源工程形式导入第一步,导入项目 File--New--Import Module--->设置导入后的项目名称第二部,在自己工程中添加Depe ...
阿里云AliYun表格存储(Table Store)相关案例
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

iscroll 下拉刷新，上拉加载

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

随机推荐

热门专题