有两种可以选择
1.如果需要下拉上拉有提示的可以下载查看以下案例:
https://github.com/fongdaBoy/pullupPulldownDemo
https://github.com/fongdaBoy/pullupPulldownDemo
2.不需要提示 或者自己写 但是样式更多 包括所有滑动案例等:
https://github.com/cubiq/iscroll
https://github.com/cubiq/iscroll
以下是我根据1改进后的代码———————————————————————————-
1.下载引用jquery.js和iscroll.js文件
<script type=”application/javascript” src=”../js/iscroll.js”></script> <!– 第三方的插件 可以实现上拉加载下拉刷–>
<script type=”application/javascript” src=”../js/jquery-3.4.1.min.js”></script><!– 第三方插件 jquery –>
2.js中:
// ————————————————-滑动方法————————————————
var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;
// 下拉重新加载页面
function pullDownAction () {
window.location.reload();//刷新
setTimeout(function () {
myScroll.refresh(); //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 100);
}
// 上拉加载更多方法
function pullUpAction () {
if(haveMoreDataflag) {
ajaxpage1(start);
}
setTimeout(function () {
myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 100);
}
// 初始化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, /* 此属性不知用意，本人从true改为false */
topOffset: pullDownOffset,
// 拖动幅度比较小时候出发的方法
onRefresh: function () {
if (pullDownEl.className.match(‘loadingPart’)) {
pullDownEl.className = ”;
pullDownEl.querySelector(‘.pullDownLabel’).innerHTML = ‘下拉重新加载…’;
} else if (pullUpEl.className.match(‘loadingPart’)) {
pullUpEl.className = ”;
pullUpEl.querySelector(‘.pullUpLabel’).innerHTML = ”;
}
},
// 拖动距离比较大的出发的方法
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match(‘flip’)) {
pullDownEl.className = ‘flip’;
pullDownEl.querySelector(‘.pullDownLabel’).innerHTML = ‘松手开始更新…’;
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match(‘flip’)) {
pullDownEl.className = ”;
pullDownEl.querySelector(‘.pullDownLabel’).innerHTML = ‘下拉重新加载…’;
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY – 5) && !pullUpEl.className.match(‘flip’)) {
pullUpEl.className = ‘flip’;
pullUpEl.querySelector(‘.pullUpLabel’).innerHTML = ”;
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match(‘flip’)) {
pullUpEl.className = ”;
pullUpEl.querySelector(‘.pullUpLabel’).innerHTML = ”;
this.maxScrollY = pullUpOffset;
}
},
// 放手后的方法
onScrollEnd: function () {
if (pullDownEl.className.match(‘flip’)) {
pullDownEl.className = ‘loadingPart’;
pullDownEl.querySelector(‘.pullDownLabel’).innerHTML = ‘加载中…’;
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match(‘flip’)) {
pullUpEl.className = ‘loadingPart’;
if(haveMoreDataflag){
pullUpEl.querySelector(‘.pullUpLabel’).innerHTML = ”;
pullUpAction(); // Execute custom function (ajax call?)
}else{
pullUpEl.querySelector(‘.pullUpLabel’).innerHTML = ‘数据已全部加载完毕’;
}
}
}
});
setTimeout(function () { document.getElementById(‘wrapper’).style.left = ‘0’; }, 800);
}
// ————————————————-页面初始化————————————————
var start = 1
var pagesize = 8;
var haveMoreDataflag = true;
$(function() {
ajaxpage1(start);
setTimeout(()=>{
//初始化绑定iScroll控件
document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);
document.addEventListener(‘DOMContentLoaded’, loaded, false);
myScroll.refresh();//很重要
},100)
});
注:在1案例中发现可能会有滑动不到底部的情况,思考了很久,后来发现需要数据加载完之后再进行scroll刷新(高度会刷新)就会正常. 我采用了定时器触发刷新方法.