最早时，公司的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/移动端下拉刷新上拉加载更多
本位代码出自：http://www.17sucai.com/pins/24527.html
基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果的更多相关文章
-
基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
-
SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
-
Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
-
juery下拉刷新，div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
-
移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
-
Android如何定制一个下拉刷新，上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
-
mui下拉刷新上拉加载
新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...
-
JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
-
listview下拉刷新上拉加载扩展（三）-仿最新版美团外卖
本篇是基于上篇listview下拉刷新上拉加载扩展(二)-仿美团外卖改造而来,主要调整了headview的布局,并加了两个背景动画,看似高大上,其实很简单: as源码地址:http://downloa ...
随机推荐
-
jNotify：操作结果信息提示条
我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息.jNotify是一款基于jQuery的信息提示插件,它支持操作成功.操作失败和操作提醒 ...
-
Object C学习笔记22-#define 用法
上一篇讲到了typedef 关键字的使用,可以参考文章 Object C 学习笔记--typedef用法 .而在c中还有另外一个很重要的关键字#define. 一. #define 简介 在C中利用预 ...
-
《python基础教程》笔记之 更加抽象
方法.函数和特性 函数和方法的区别在于self参数,方法(绑定方法)将它们的第一个参数帮顶到所属的实例上,因此这个参数可以不必提供.可以将特性绑定到一个普通函数上,这样就不会有特殊的self参数了,换 ...
-
微信小程序开发心得--动画机制
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受.首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认 ...
-
FULL HD
FULL HD(全高清)是Full High Definition的简写,是指物理分辨率高达1920×1080显示(包括1080i和1080P),其中i(interlace)是指隔行扫描:P(Prog ...
-
Hat’s Words HDU - 1247 字典树
题意:给出数个单词 输出单词 如果该单词 是由字典中的单词组成的 思路:字典树 先把全部建树 然后对于每一个单词进行分割,分别拿两半到字典树里面去找 小心RE! #include<bits/s ...
-
MySQL表中的数据类型
数据类型:在表中数据类型主要是限制字段必须以什么样的数据类型传值. 一 整型 整数类型:TINYINT SMALLINT MEDIUMINT INT BIGINT总共有五种,name我们一般用到的也就 ...
-
[Web 前端] CSS篇之3. 如何保持浮层水平垂直居中
原文链接](http://www.cnblogs.com/yaliu/p/5190957.html) 浮层水平垂直居中方法 (一)利用绝对定位与transform <div class=&quo ...
-
boost::asio基本使用
一.Asio网络库 截止到C++17,C++标准库都没有加入网络通信库.实际项目网络编程是非常常见的功能,直接使用操作系统API是低效率且不稳定的,比较好的方法是借助第三方成熟可靠的网络库.据我所知C ...
-
oracle(十二)redo 与 undo
1.undo:回滚未提交的事务.未提交前,内存不够用时,DBWR将脏数据写入数据文件中,以腾出内存空间. 这就是undo存在的原因. redo:恢复所有已提交的事务 2.实例失败(如主机掉电)可能出现 ...