本篇介绍的是html中使用iscroll实现上拉加载更多，下拉刷新数据。
前言
在一次开发微信公众号的项目中，我需要添加上拉加载更多数据，下拉刷新。当时还没有做过这样的功能。请教同事和上网搜索之后，发现iscroll可以实现我们需要的功能。
iscroll5下载链接：http://cubiq.org/iscroll-5
效果
-
上拉加载更多
iscroll1.png
iscroll2.png
-
下拉刷新
iscroll3.png
iscroll4.png
-
尖头和加载图标
pull-icon@2x.png
实现步骤
- 引入js/iscroll.js和js/iscroll-probe.js文件。
- js初始化IScroll，添加监听，并实现获取监听之后触发的方法。
- 实现上拉加载方法和下拉刷新方法。
具体实现代码
- 在html文件中，引入js和css。
iscroll.css文件:
/*iscroll css*/
#wrapper {
position: absolute;
z-index: -1;
bottom: 0px; /* 底部无控件 */
left: 0;
width: 100%;
overflow: hidden;
}
#scroller {
top: -40px; /* 隐藏下啦显示条 下啦显示条div高度为40px */
position: absolute;
z-index: -1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#pullDown,#pullUp {
height:40px;
line-height:40px;
font-weight:bold;
font-size:14px;
}
#pullDown {
/*top: -20px;*/
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon {
display:block; float:left;
width:40px; height:40px;
background:url(../pull-icon@2x.png) 0 0 no-repeat;
-webkit-background-size:40px 80px; background-size:40px 80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:250ms;
}
#pullDown .pullDownIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullDown.flip .pullDownIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullUp.flip .pullUpIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
background-position:0 100%;
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-transition-duration:0ms;
-webkit-animation-name:loading;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
.pullUpIcon{text-align:center;width:40px;margin:0 auto;display:block;margin-left:38%;}
.pullDownIcon{text-align:center;width:40px;margin:0 auto;display:block;margin-left:38%;}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="iscroll/css/iscroll.css" />
<style type="text/css">
*{ margin: 0; padding: 0; border: 0;}
#wrapper
{
top: 48px; /* 顶部导航栏 */
}
.brighten_header{ background-color: #3b9eed; height: 48px;text-align: center; color: white; font-size: 16px; position: relative;}
.brighten_header_text{vertical-align: middle; line-height: 48px;}
</style>
</head>
<body onload="loaded()">
<div class="brighten_header">
<div class="brighten_header_text">数据列表</div>
</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon" ></span><span class="pullDownLabel" >下拉刷新...</span>
</div>
<div id="contentView" >
<div style="padding: 10px 15px;">
标题
</div>
<div style="padding: 10px 15px;">
标题
</div>
<div style="padding: 10px 15px;">
标题
</div>
</div>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉刷新...</span>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="iscroll/js/iscroll.js"></script>
<script type="text/javascript" src="iscroll/js/iscroll-probe.js"></script>
<script type="text/javascript" src="iscroll/js/iscroll-custom.js"></script>
<script type="text/javascript">
// 获取数据
function getData()
{
// 获取数据接口 ………………………………
}
// 请求返回数据处理
function resultData()
{
// 处理数据 …………………………
// 复原上拉下拉框的文字
//defaultStatu("more");
defaultStatu("update");
}
</script>
</html>
注：iscroll.js和iscroll-probe.js的顺序不要反了，要不然可能会出现scroll监听事件不触发的情况。
- 添加scroll监听，并实现监听方法。
iscroll-custom.js文件
/*iscroll-custom js*/
var isLoadUpdate = false;
var myScroll,pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,pageSize=2;
var isTouch = false; // 手是否触摸屏幕
var isMoreLoading = false; // 正在加载更多数据中
var isUpdateLoading = false; // 正在更新数据中
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight + 15;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight + 15;
myScroll = new IScroll('#wrapper', {
preventDefault:false, // 是否屏蔽默认事件
probeType: 3,
mouseWheel: true, // 是否监听鼠标滚轮事件
scrollbars: true, //是否显示默认滚动条
fadeScrollbars: true, //是否渐隐滚动条，关掉可以加速
disableTouch: false
});
myScroll.on('scroll',positionJudge);
}
function positionJudge(){
if(this.y>pullDownOffset && !isUpdateLoading) //判断下拉
{
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松开开始更新...';
if(!isTouch) // 松开执行
{
isUpdateLoading = true;
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
pullDownEl.className = 'loading';
updateData();
}
}
else if (this.y<pullDownOffset && isTouch && !isUpdateLoading && this.y>0)
{
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
}
else if(this.y<(this.maxScrollY-pullUpOffset) && !isMoreLoading)
{
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松开加载更多...';
if(!isTouch) // 松开执行
{
isMoreLoading = true;
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
pullUpEl.className = 'loading';
moreData();
}
}
else if(this.y>(this.maxScrollY-pullUpOffset) && !isMoreLoading && isTouch && this.y<0)
{
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉刷新...';
}
}
document.getElementById("wrapper").addEventListener('touchend', function (e) {isTouch = false;}, false);
document.getElementById("wrapper").addEventListener('touchstart', function (e) {isTouch = true;}, false);
document.getElementById("wrapper").addEventListener('touchmove', function (e) {e.preventDefault();}, false);
function updateData() {
isLoadUpdate = true;
getData();
}
function moreData(){
isLoadUpdate = false;
getData();
}
function defaultStatu(type) {
if(type == "more") //more
{
isMoreLoading = false;
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉刷新...';
}
else if(type == "update") //update
{
isUpdateLoading = false;
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
}
}
iscroll5参数说明：http://blog.csdn.net/sweetsuzyhyf/article/details/44195549/
以上基本完成了上拉下拉功能，但是这里有个不足，就是数据不足一页的时候，scroll无法上下滑动，只有当里面的内容大于一页的时候，才有滑动效果。我们可以在js中把内容的最小高度设置为屏幕高度减去wrapper距离顶部的距离，然后把scroller的高度设置为内容高度加1。
<!-- 在html页面中添加下面js -->
$(document).ready(function(){
initScrollerHeight();
});
function initScrollerHeight() {
var bodyHeight = $(window).height();
var ulTop = $('#wrapper').offset().top;
var height = bodyHeight - ulTop;
$('#contentView').css('min-height', height);
// 设置最小
var scrollerCustomHeight = $('#contentView').height() + 1;
var scrollerHeightPX = scrollerCustomHeight + "px";
$('#scroller').css('height', scrollerHeightPX);
}
本篇小结：
1、引入js。
2、初始化scroll，并设置属性。
3、添加监听，并实现监听方法。
4、实现下拉上拉方法。
网友评论