本篇介紹的是html中使用iscroll實現(xiàn)上拉加載更多，下拉刷新數(shù)據(jù)歉摧。
前言
在一次開發(fā)微信公眾號的項目中艇肴，我需要添加上拉加載更多數(shù)據(jù)，下拉刷新叁温。當(dāng)時還沒有做過這樣的功能再悼。請教同事和上網(wǎng)搜索之后，發(fā)現(xiàn)iscroll可以實現(xiàn)我們需要的功能膝但。
iscroll5下載鏈接：http://cubiq.org/iscroll-5
效果
-
上拉加載更多
iscroll1.png
iscroll2.png -
下拉刷新
iscroll3.png
iscroll4.png -
尖頭和加載圖標(biāo)
pull-icon@2x.png
實現(xiàn)步驟
- 引入js/iscroll.js和js/iscroll-probe.js文件冲九。
- js初始化IScroll，添加監(jiān)聽跟束，并實現(xiàn)獲取監(jiān)聽之后觸發(fā)的方法莺奸。
- 實現(xiàn)上拉加載方法和下拉刷新方法。
具體實現(xiàn)代碼
- 在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; /* 頂部導(dǎo)航欄 */
}
.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">數(shù)據(jù)列表</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;">
標(biāo)題
</div>
<div style="padding: 10px 15px;">
標(biāo)題
</div>
<div style="padding: 10px 15px;">
標(biāo)題
</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">
// 獲取數(shù)據(jù)
function getData()
{
// 獲取數(shù)據(jù)接口 ………………………………
}
// 請求返回數(shù)據(jù)處理
function resultData()
{
// 處理數(shù)據(jù) …………………………
// 復(fù)原上拉下拉框的文字
//defaultStatu("more");
defaultStatu("update");
}
</script>
</html>
注：iscroll.js和iscroll-probe.js的順序不要反了，要不然可能會出現(xiàn)scroll監(jiān)聽事件不觸發(fā)的情況略贮。
- 添加scroll監(jiān)聽甚疟，并實現(xiàn)監(jiān)聽方法。
iscroll-custom.js文件
/*iscroll-custom js*/
var isLoadUpdate = false;
var myScroll,pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,pageSize=2;
var isTouch = false; // 手是否觸摸屏幕
var isMoreLoading = false; // 正在加載更多數(shù)據(jù)中
var isUpdateLoading = false; // 正在更新數(shù)據(jù)中
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, // 是否監(jiān)聽鼠標(biāo)滾輪事件
scrollbars: true, //是否顯示默認滾動條
fadeScrollbars: true, //是否漸隱滾動條逃延，關(guān)掉可以加速
disableTouch: false
});
myScroll.on('scroll',positionJudge);
}
function positionJudge(){
if(this.y>pullDownOffset && !isUpdateLoading) //判斷下拉
{
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松開開始更新...';
if(!isTouch) // 松開執(zhí)行
{
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) // 松開執(zhí)行
{
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參數(shù)說明：http://blog.csdn.net/sweetsuzyhyf/article/details/44195549/
以上基本完成了上拉下拉功能览妖，但是這里有個不足，就是數(shù)據(jù)不足一頁的時候揽祥，scroll無法上下滑動讽膏，只有當(dāng)里面的內(nèi)容大于一頁的時候，才有滑動效果拄丰。我們可以在js中把內(nèi)容的最小高度設(shè)置為屏幕高度減去wrapper距離頂部的距離桅打，然后把scroller的高度設(shè)置為內(nèi)容高度加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);
// 設(shè)置最小
var scrollerCustomHeight = $('#contentView').height() + 1;
var scrollerHeightPX = scrollerCustomHeight + "px";
$('#scroller').css('height', scrollerHeightPX);
}
本篇小結(jié)：
1愈案、引入js。
2鹅搪、初始化scroll站绪，并設(shè)置屬性。
3丽柿、添加監(jiān)聽恢准，并實現(xiàn)監(jiān)聽方法魂挂。
4、實現(xiàn)下拉上拉方法馁筐。
