基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最先时，公司的H5项目中曾用过点击一个“加载更多”的DOM元素来实现分页的功能，后来又用过网上有人写的一个上拉加载更多的插件，那个插件是页面将要滚动到底部时就自动请求数据并插入到页面的后边，其实这样也是能够的，不过在咱们的负责人看了以前的效果后提出的要求是但愿页面滚动到底部时先暂时不加载更多的数据，而是当页面滚动到底部且用户还在往上拉动页面时再加载更多。这样的好处是，万一用户只是想滚动到底部只看看被屏幕遮挡住的其余数据而没有想要看更多的数据时，就不用再请求数据了。因而我就查资料找到了一个基于iscroll的插件实现的这种效果。具体的效果实现代码请戳向这里：基于zepto的H5/移动端tab切换触摸拖动加载更多数据。javascript
注意
在这里提醒一下你们，若是你实际开发的项目中出现了在也一个页面中会有tab切换，在每一个切换的内容中又有上拉加载更多的需求，建议你能够把每一个tab切换的效果作成单独的页面来模拟tab切换，这样的好处是在一个页面中就不会有各类各样的判断来知足上拉加载更多的效果在不一样tab以前切换的需求，由于提示上拉加载更多的效果在一个页面中的DOM节点只有一个，若是你判断了第一个tab中没有更多数据了，那就要把上拉加载更多给置换成没有更多数据了，而在第二个tab中若是有不少的数据就又要把没有更多数据的效果给置换成上拉加载更多。这还只是其中的一种状况，还有一种状况是页面一加载完成就要判断第一个tab中还有没有更多的数据，若是没有，就要把上拉加载更多给置换成没有更多数据了，而在第二个tab中就如同以前的作法了，同时还有一种状况是，因为是在同一个页面中用tab切换来查看其它的数据，那么在上拉加载更多数据的时候就要判断当前是在哪一个tab下，这里其实简单一点，只要知道当前tab的索引就行了。以下图酱的：css
以上种种，只是提醒你们注意的一些比较麻烦的状况罢了，在实际的操做中可能更为复杂，本人就栽过这样的大坑，因此建议你们能够将tab拆分为单个的页面来模拟切换的效果，这样虽然在程序上好比在浏览器返回上一级时可能会达不到一些要求，可是这个问题几乎能够忽略不计，从而在单个页面中来作这些判断就简单的多了，大大下降了开发成本，切用户体验几乎没有什么改变。html
好，言归正传，回到本篇博客内容的主题“基于SwiperJs的H5/移动端下拉刷新上拉加载更多”。以前只想着说swiper能够用来作一些图片轮播切换的效果，因此就用了iscroll插件，以为也没什么不妥。因为本人也热爱学习，喜欢在网上查找各类的资料以及各类效果的实现，无心中就看到有人竟然用swiper写了一个下拉刷新上拉加载更多的效果。瞬间以为网络上的大牛真是多如牛毛啊，哈哈... 也瞬间以为本身的眼光太窄、眼界太浅，看问题只看表面，没有过多的去研究一些插件的文档和功能。因为咱们的H5项目中图片的轮播就是用的swiper，那么再用swiper来实现上拉加载更多，那就不用使用过多的其余插件了，能够下降项目的体积，减小服务器的请求。下边就奉献上基于SwiperJs的H5/移动端下拉刷新上拉加载更多的实现代码：java
<!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的官网文档中都是能够找获得的，我就不一一作介绍和注释了。最后的效果图以下：
web
这里有必要说明下，因为本demo只是想呈现swiper能够实现下拉刷新和上拉加载更多，而没有去判断是否有更多的数据须要加载，因此没有将tab给分割成多个单个页面来实现。不过仍是要提醒你们，尽可能将tab拆分为多个页面来实现上拉加载更多。浏览器
这里附上源代码下载案例：
基于SwiperJs的H5/移动端下拉刷新上拉加载更多服务器
- 1. H5基于iScroll实现下拉刷新，上拉加载更多
- 2. iscroll实现移动端下拉刷新，上拉加载更多
- 3. 下拉刷新，上拉加载更多
- 4. H5下拉刷新上拉加载更多
- 5. 基于Zepto移动端下拉加载（刷新），上拉加载插件开发
- 6. 上拉下拉刷新加载更多（适用pc端、移动端）
- 7. H5页面基于iScroll.js插件实现下拉刷新，上拉加载更多
- 8. mui简单的上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉
- 9. 移动端上拉加载和下拉刷新的vue插件
- 10. vue2.0 移动端，下拉刷新，上拉加载更多 封装组件
- 更多相关文章...
- • ionic 下拉刷新 - ionic 教程
- • ionic 上拉菜单(ActionSheet) - ionic 教程
- • ☆基于Java Instrument的Agent实现
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。