iscroll5实现一个下拉刷新上拉加载的效果
直接上代码！！！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul, li {
list-style: none;
} #wrapper {
width: 100%;
} .up, .down, li {
height: 49px;
line-height: 49px;
text-align: center;
} .up {
display: none;
background-color: darkgrey;
color:#ffffff;
border-bottom: 1px solid lightgrey;
} .down {
display: none;
background-color: darkgrey;
color: #ffffff;
} li {
background-color: darkgrey;
border-bottom: 1px solid lightgrey;
} #wrapper {
position: relative;
height: 500px;
background: #aaa;
overflow: hidden; /*iscroll不能设置overflow为auto*/
} #scroller {
position: absolute;
left: 0;
top: 0;
width: 100%;
} .iScrollVerticalScrollbar {
/*设置凹槽的样式*/
position: absolute;
z-index: 10;
width: 5px;
top: 0;
right: 0;
overflow: hidden;
height: 100%;
border-radius: 10px;
} .iScrollIndicator {
/*设置滚动条的样式*/
width: 100%;
background: orange;
border-radius: 10px;
height: 30%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<div class="up" id="up">下拉刷新</div>
<ul class="list" id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
<div class="down" id="down">上拉加载更多</div>
</div>
</div>
<script type="text/javascript" src="iscroll5.js"></script>
<script type="text/javascript" src="iscroll-probe.js"></script> <script type="text/javascript"> function load() {
var myScroll = new IScroll("#wrapper", {
useTransition: true,
useTransform: true,
mouseWheel: true,
scrollbars: "custom",//只有该属性的值为"custom"，才能通过.iScrollVerticalScrollbar和.iScrollIndicator设置凹槽和滚动条的样式
interactiveScrollbars: true,
resizeScrollbars: false,//当这个属性设置为否时,才可以通过.iScrollIndicator改变滚动条(不是凹槽的的宽和高）
probeType: 3//这个值设置为3而且必须引入iscroll-probe.js才能触发onscroll事件
}); var down = document.getElementById("down");
var up = document.getElementById("up");
var scroller = document.getElementById("scroller");
var list = document.getElementById("list");
var step = 3;//上拉加载时的动态创建的li的个数
var max = 30;//li的最大个数
var flag = false;//滚动条滚动到最底部的标识
var end = false;//数据加载完成后的标识 myScroll.on("scroll", function () {
if (parseInt(this.y) >= 0 && this.directionY == -1) {//down
up.style.display = "block";
if (parseInt(this.y) == 0) {
up.style.display = "none";
this.refresh();
}
}
if (parseInt(this.y) == this.maxScrollY) {
if (end) {
return;
}
var self = this;
setTimeout(function () {
down.style.display = "block";
self.y -= (list.children[0].clientHeight) * step;
self.refresh();
flag = true;
if (list.children.length == max) {
down.innerHTML = "没有更多数据";
flag = false;
setTimeout(function () {
down.style.display = "none";
self.refresh();//为了解决 down.style.display = "none";之后最下面有一行空白；
end = true;
}, 2000)
}
}, 1000); }
if (flag && this.directionY == 1 && this.y < this.maxScrollY) {
if (end) {
return;
}
flag = false;
down.style.display = "none";
var fragment = document.createDocumentFragment();
var len = list.children.length;//每次上拉时动态获取当前li的总个数
var num = max - len;//最大个数和总个数的差值
step = num <= step && num >= 0 ? num : step;//当两个数的差值大于等于0小于等于step的时候，step等于两者之差，否则step不变
for (var i = 0; i < step; i++) {
var li = document.createElement("li");
li.innerHTML = list.children.length + i + 1;
fragment.appendChild(li);
}
list.appendChild(fragment);
}
});
}
window.addEventListener("load", load, false);
</script>
</body>
</html>
关于iscroll5的相关属性和方法，请参考http://blog.csdn.net/sweetsuzyhyf/article/details/44195549/
iscroll5实现一个下拉刷新上拉加载的效果的更多相关文章
- 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 ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- ListView下拉刷新上拉加载更多实现
这篇文章将带大家了解listview下拉刷新和上拉加载更多的实现过程,先看效果(注:图片中listview中的阴影可以加上属性android:fadingEdge="none"去掉 ...
- RecyclerView下拉刷新上拉加载（三）—对Adapter的封装
RecyclerView下拉刷新上拉加载(一) http://blog.csdn.net/baiyuliang2013/article/details/51506036 RecyclerView下拉刷 ...
- RecyclerView下拉刷新上拉加载（一）
listview下拉刷新上拉加载扩展(一) http://blog.csdn.net/baiyuliang2013/article/details/50252561 listview下拉刷新上拉加载扩 ...
- listview下拉刷新上拉加载扩展（二）-仿美团外卖
经过前几篇的listview下拉刷新上拉加载讲解,相信你对其实现机制有了一个深刻的认识了吧,那么这篇文章我们来实现一个高级的listview下拉刷新上拉加载-仿新版美团外卖的袋鼠动画: 项目结构: 是 ...
随机推荐
- Android Bitmap 和 ByteArray的互相转换
Android Bitmap 和 ByteArray的互相转换 移动平台图像处理,需要将图像传给native处理,如何传递?将bitmap转换成一个 byte[] 方便传递也方便cpp代码直接处理图像 ...
- .NET基础拾遗（4）委托、事件、反射与特性
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...
- iOS开发系列--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook系统服务开发汇总
--系统应用与系统服务 iOS开发过程中有时候难免会使用iOS内置的一些应用软件和服务,例如QQ通讯录.微信电话本会使用iOS的通讯录,一些第三方软件会在应用内发送短信等.今天将和大家一起学习如何使用 ...
- 曲演杂坛--蛋疼的ROW_NUMBER函数
使用ROW_NUMBER来分页几乎是家喻户晓的东东了,而且这东西简单易用,简直就是程序员居家必备之杀器,然而ROW_NUMBER也不是一招吃遍天下鲜的无敌BUG般存在,最近就遇到几个小问题,拿出来供大 ...
- ABP框架 - 缓存
文档目录 本节内容: 简介 ICacheManager ICache ITypedCache 配置 实体缓存 EntityCache 是如何工作 Redis 缓存集成 简介 ABP提供了一个缓存接口, ...
- linux下select/poll/epoll机制的比较
select.poll.epoll简介 epoll跟select都能提供多路I/O复用的解决方案.在现在的Linux内核里有都能够支持,其中epoll是Linux所特有,而select则应该是POSI ...
- iOS-推送，证书申请，本地推送
介绍一点点背景资料 众所周知,使用推送通知是一个很棒的.给应用添加实时消息通知的方式.这样做的结局是,开发者和用户之间,彼此永远保持着一种令人愉悦的亲密关系. 然而不幸的是,iOS的推送通知并非那么容 ...
- PHP安全之Web攻击
一.SQL注入攻击(SQL Injection) 攻击者把SQL命令插入到Web表单的输入域或页面请求的字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或者影响)动态 ...
- MVC 验证码实现（ 简易版）
现在网站上越来越多的验证码,使用场景也是越来越多,登陆.注册.上传.下载...等等地方,都有可能大量使用到验证码,那么制作验证码到底有多简单呢?我们一起来看下最简易版的验证码实现过程- 验证码的基本步 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（27）-权限管理系统-分配用户给角色
系列目录 分配用户给角色,跟分配角色给用户操作是基本一致的. 打开模块维护,展开SysRole模块添加一个操作码,并赋予权限 设置好之后将权限授权给管理员,在SysRole的index添加操作码与js ...