最早时，公司的H5项目中曾用过点击一个“加载更多”的DOM元素来实现分页的功能，后来又用过网上有人写的一个上拉加载更多的插件，那个插件是页面将要滚动到底部时就自动请求数据并插入到页面的后边，其实这样也是可以的，不过在我们的负责人看了之前的效果后提出的要求是希望页面滚动到底部时先暂时不加载更多的数据，而是当页面滚动到底部且用户还在往上拉动页面时再加载更多。这样的好处是，万一用户只是想滚动到底部只看看被屏幕遮挡住的其他数据而没有想要看更多的数据时，就不用再请求数据了。于是我就查资料找到了一个基于iscroll的插件实现的这种效果。具体的效果实现代码请戳向这里：基于zepto的H5/移动端tab切换触摸拖动加载更多数据。
注意
在这里提醒一下大家，如果你实际开发的项目中出现了在也一个页面中会有tab切换，在每个切换的内容中又有上拉加载更多的需求，建议你可以把每个tab切换的效果做成单独的页面来模拟tab切换，这样的好处是在一个页面中就不会有各种各样的判断来满足上拉加载更多的效果在不同tab之前切换的需求，因为提示上拉加载更多的效果在一个页面中的DOM节点只有一个，如果你判断了第一个tab中没有更多数据了，那就要把上拉加载更多给置换成没有更多数据了，而在第二个tab中如果有很多的数据就又要把没有更多数据的效果给置换成上拉加载更多。这还只是其中的一种情况，还有一种情况是页面一加载完成就要判断第一个tab中还有没有更多的数据，如果没有，就要把上拉加载更多给置换成没有更多数据了，而在第二个tab中就如同之前的做法了，同时还有一种情况是，由于是在同一个页面中用tab切换来查看其它的数据，那么在上拉加载更多数据的时候就要判断当前是在哪个tab下，这里其实简单一点，只要知道当前tab的索引就好了。如下图酱的：
以上种种，只是提醒大家注意的一些比较麻烦的情况罢了，在实际的操作中可能更为复杂，本人就栽过这样的大坑，所以建议大家可以将tab拆分为单个的页面来模拟切换的效果，这样虽然在程序上比如在浏览器返回上一级时可能会达不到一些要求，但是这个问题几乎可以忽略不计，从而在单个页面中来做这些判断就简单的多了，大大降低了开发成本，切用户体验几乎没有什么改变。
好，言归正传，回到本篇博客内容的主题“基于SwiperJs的H5/移动端下拉刷新上拉加载更多”。之前只想着说swiper可以用来做一些图片轮播切换的效果，所以就用了iscroll插件，觉得也没什么不妥。由于本人也热爱学习，喜欢在网上查找各种的资料以及各种效果的实现，无意中就看到有人居然用swiper写了一个下拉刷新上拉加载更多的效果。瞬间觉得网络上的大牛真是多如牛毛啊，哈哈... 也瞬间觉得自己的眼光太窄、眼界太浅，看问题只看表面，没有过多的去研究一些插件的文档和功能。由于我们的H5项目中图片的轮播就是用的swiper，那么再用swiper来实现上拉加载更多，那就不用使用过多的其他插件了，可以降低项目的体积，减少服务器的请求。下边就奉献上基于SwiperJs的H5/移动端下拉刷新上拉加载更多的实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<style type="text/css">
html, body{height: 100%;font-family: "微软雅黑";}
*{margin: 0;padding: 0;box-sizing: border-box;}
a {color: #428bca;text-decoration: none;}
a:hover,a:focus {color: #2a6496;text-decoration: underline;}
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
.padd_40{padding-top: 80px;background: #F5F5F5;overflow-x:hidden;}
.a{text-align:center;line-height: 40px;position: fixed;top: 0;left: 0;width: 100%;z-index: 10;border-bottom: 1px #ccc solid; background: #f50;color: #fff;}
.tab{display: flex;line-height: 40px;position: fixed;top: 40px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}
.tab a{width: 33.333333%;background: #fff;text-align: center;}
.tab .active{border-bottom: 1px #f50 solid; color: #f50;}
.panel{margin: 0;}
.refreshtip {position: absolute;left: 0;width: 100%;margin: 10px 0;text-align: center;color: #999;}
.swiper-container{overflow: visible;}
.loadtip { display: block;width: 100%;line-height: 40px; height: 40px;text-align: center;color: #999;border-top: 1px solid #ddd;}
.swiper-container, .w{height: calc(100vh - 120px);}
.swiper-slide{height: auto;}
.text-center{text-align: center;}
.list-group{padding-left: 0;margin-bottom: 20px;}
.list-group-item{ position: relative; display: block;padding: 10px 15px;margin-bottom: -1px;background-color: #fff;border: 1px solid #ddd;}
.list-group-item:first-child {border-top-left-radius: 4px;border-top-right-radius: 4px;}
</style>
</head>
<body class="padd_40">
<div class="a">标题</div>
<div class="tab">
<a class="active" href="javascript:;">tab1</a>
<a href="javascript:;">tab2</a>
<a href="javascript:;">tab3</a>
</div>
<div class="swiper-container">
<div class="refreshtip">下拉可以刷新</div>
<div class="swiper-wrapper w">
<div class="swiper-slide d">
<div class="init-loading list-group-item text-center" style="display: none;">下拉可以刷新</div>
<div class="swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide list-group">
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
</div>
<div class="swiper-slide list-group">
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
</div>
<div class="swiper-slide list-group">
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
</div>
</div>
</div>
</div>
</div>
<div class="loadtip">上拉加载更多</div>
<div class="swiper-scrollbar"></div>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/swiper-3.2.5.min.js"></script>
<script type="text/javascript">
var loadFlag = true;
var oi = 0;
var mySwiper = new Swiper('.swiper-container',{
direction: 'vertical',
scrollbar: '.swiper-scrollbar',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
onTouchMove: function(swiper){ //手动滑动中触发
var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
if(mySwiper.translate < 50 && mySwiper.translate > 0) {
$(".init-loading").html('下拉刷新...').show();
}else if(mySwiper.translate > 50 ){
$(".init-loading").html('释放刷新...').show();
}
},
onTouchEnd: function(swiper) {
var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
// 上拉加载
if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {
if(loadFlag){
$(".loadtip").html('正在加载...');
}else{
$(".loadtip").html('没有更多啦！');
}
setTimeout(function() {
for(var i = 0; i <5; i++) {
oi++;
$(".list-group").eq(mySwiper2.activeIndex).append('<li class="list-group-item">我是加载出来的'+oi+'...</li>');
}
$(".loadtip").html('上拉加载更多...');
mySwiper.update(); // 重新计算高度;
}, 800);
}
// 下拉刷新
if(mySwiper.translate >= 50) {
$(".init-loading").html('正在刷新...').show();
$(".loadtip").html('上拉加载更多');
loadFlag = true;
setTimeout(function() {
$(".refreshtip").show();
$(".init-loading").html('刷新成功！');
setTimeout(function(){
$(".init-loading").html('').hide();
},800);
$(".loadtip").show();
//刷新操作
mySwiper.update(); // 重新计算高度;
}, 1000);
}else if(mySwiper.translate >= 0 && mySwiper.translate < 50){
$(".init-loading").html('').hide();
}
return false;
}
});
var mySwiper2 = new Swiper('.swiper-container2',{
onTransitionEnd: function(swiper){
$('.w').css('transform', 'translate3d(0px, 0px, 0px)');
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
$('.tab a').eq(mySwiper2.activeIndex).addClass('active').siblings('a').removeClass('active');
}
});
$('.tab a').click(function(){
$(this).addClass('active').siblings('a').removeClass('active');
mySwiper2.slideTo($(this).index(), 500, false);
$('.w').css('transform', 'translate3d(0px, 0px, 0px)');
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
});
</script>
</body>
</html>
以上代码中一些关于swiper的一些属性和方法，其实在swiper的官网文档中都是可以找得到的，我就不一一做介绍和注释了。最后的效果图如下：
这里有必要说明下，由于本demo只是想呈现swiper可以实现下拉刷新和上拉加载更多，而没有去判断是否有更多的数据需要加载，所以没有将tab给分割成多个单个页面来实现。不过还是要提醒大家，尽量将tab拆分为多个页面来实现上拉加载更多。
这里附上源代码下载案例：
基于SwiperJs的H5/移动端下拉刷新上拉加载更多