// demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>scroll-loading</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
li {
list-style: none;
height: 80px;
}
li:nth-of-type(2n) {
background-color: green;
}
li:nth-of-type(2n+1) {
background-color: greenyellow;
}
#wrapper {
height: 400px;
overflow: hidden;
position: relative;
}
#wrapper .pull-up-msg {
height: 30px;
text-align: center;
}
#wrapper .pull-down-msg {
height: 30px;
text-align: center;
display: none;
}
</style>
</head>
<body onload="loaded()">
<div id="wrapper">
<div class="scroll">
<div class="pull-down-msg"></div>
<ul>
<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>
</ul>
<div class="pull-up-msg"></div>
</div>
</div>
<script src="./iscroll-master/build/iscroll-probe.js"></script>
<script src="./jQuery-v2.0.0.js"></script>
<script src="./scrollLoading.js"></script>
<script>
function loaded() {
var myScrollLoading = new ScrollLoading({
pullUpEl: '#wrapper .pull-up-msg',
pullDownEl: '#wrapper .pull-down-msg',
pullUpFun: loadFun,
pullDownFun: refreshFun,
IScrollOptions: {}
});
// 注册上拉加载失败的点击事件
document.querySelector('.pull-up-msg').onclick = function () {
if (myScrollLoading.loading == 'loadFail') {
myScrollLoading.changeLoading('loading');
loadFun()
}
}
// 下拉刷新
function refreshFun() {
setTimeout(() => {
let newEl = `
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
<li>77</li>
<li>88</li>
<li>99</li>
<li>100</li>
`
$('#wrapper ul').html(newEl);
myScrollLoading.changeRefreshStatus('refreshOver');
}, 2000);
};
// 上拉加载
function loadFun() {
setTimeout(() => {
// 模拟加载失败
if (Math.random() > 0.8) {
myScrollLoading.changeLoading('loadFail');
return
}
let newEl = `
<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>
`
$('#wrapper ul').append(newEl);
if ($('#wrapper li').length > 50) {
// 加载结束,不可再加载
myScrollLoading.changeLoading('loadOver');
} else {
// 本次加载完成,可再加载
myScrollLoading.changeLoading('loadable');
}
}, 2000);
}
}
</script>
</body>
</html>
// scrollLoading.js
class ScrollLoading {
constructor({
IScrollEl,
pullUpEl,
pullDownEl,
pullUpFun,
pullDownFun,
IScrollOptions
}) {
this.options = IScrollOptions || {};
this.options.probeType = 2;
this.options.mouseWheel = true;
this.IScrollEl = document.querySelector(IScrollEl);
this.pullUpEl = document.querySelector(pullUpEl);
this.pullDownEl = document.querySelector(pullDownEl);
this.permitPullDown = Boolean(pullDownEl);
this.changeLoading('loadable');
this.info(IScrollEl, pullUpFun, pullDownFun);
}
info(IScrollEl, loadMoreFun, refreshFun) {
let _this = this;
this.myScroll = new IScroll(IScrollEl, this.options);
// 滚动事件
this.myScroll.on('scroll', function () {
if (_this.permitPullDown) {
// 下拉
if (_this.myScroll.y > 10) {
_this.pullDownEl.style.display = 'block';
};
if (_this.myScroll.y > 40) {
_this.changeRefreshStatus('refreshRelease');
} else if (_this.myScroll.y > 0 && _this.myScroll.y < 50) {
_this.changeRefreshStatus('refreshAble');
}
}
});
// 滚动结束事件
this.myScroll.on('scrollEnd', function () {
// 上拉加载
let distance = _this.myScroll.y - _this.myScroll.maxScrollY;
// 距离底部20px,即认为触底
if (distance < 20 && _this.loading == 'loadable') {
_this.changeLoading('loading');
loadMoreFun && loadMoreFun();
}
// 下拉刷新
if (_this.permitPullDown) {
if (_this.refresh == 'refreshRelease') {
_this.changeRefreshStatus('refreshing');
refreshFun && refreshFun();
} else {
_this.pullDownEl.style.display = 'none';
}
}
});
}
// 首页加载scroll高度不够执行
reset() {
let boxHeight = this.IScrollEl.offsetHeight;
let scrollHeight = this.IScrollEl.children[0].offsetHeight;
if (boxHeight > scrollHeight) {
this.IScrollEl.children[0].style.height = boxHeight + 1 + 'px';
this.myScroll.refresh();
}
}
changeLoading(status) {
let loadingObj = {
loadable: '上拉加载',
loading: '加载中...',
loadFail: '加载失败,点击重试',
loadOver: '加载完成'
};
this.loading = status;
this.pullUpEl.innerText = loadingObj[status];
setTimeout(() => {
this.myScroll.refresh();
}, 0);
}
changeRefreshStatus(status) {
let refreshObj = {
refreshAble: '下拉刷新',
refreshRelease: '释放刷新',
refreshing: '刷新中',
refreshOver: '刷新完成'
}
this.refresh = status;
this.pullDownEl.innerText = refreshObj[status];
if (status == 'refreshOver') {
setTimeout(() => {
this.pullDownEl.style.display = 'none';
this.myScroll.refresh();
}, 100);
}
}
}
网友评论