最早时，公司的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/移动端下拉刷新上拉加载更多的更多相关文章

  1. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  2. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  3. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  4. juery下拉刷新，div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  5. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  6. Android如何定制一个下拉刷新，上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  7. mui下拉刷新上拉加载

    新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...

  8. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  9. listview下拉刷新上拉加载扩展（三）-仿最新版美团外卖

    本篇是基于上篇listview下拉刷新上拉加载扩展(二)-仿美团外卖改造而来,主要调整了headview的布局,并加了两个背景动画,看似高大上,其实很简单: as源码地址:http://downloa ...

随机推荐

  1. 安装CentOS 7（转）

    转载地址:https://www.cnblogs.com/wcwen1990/p/7630545.html CentOS7安装详解   本文基于vmware workstations进行CentOS7 ...

  2. Application Initialization UI for IIS 7.5

    IIS Application Initialization for IIS 7.5 enables website administrators to improve the responsiven ...

  3. cactiEZ 配置

    CactiEZ 中文版是简单有效的cacti中文解决方案,它基于centos6 整合了cacti的相关软件,重新编译的一个新的操作系统 它基于centos6,启动速度快,支持EXT4文件系统,全中文页 ...

  4. Codeforces 1101F Trucks and Cities dp (看题解)

    Trucks and Cities 一个很显然的做法就是二分然后对于每个车贪心取check, 这肯定会TLE, 感觉会给人一种贪心去写的误导... 感觉有这个误导之后很难往dp那个方向靠.. dp[ ...

  5. 51Nod1773 A国的贸易 多项式 FWT

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1773.html 题目传送门 - 51Nod1773 题意 给定一个长度为 $2^n$ 的序列,第 $ ...

  6. namenode做了ha后kylin出现错误No registered coprocessor service found for name CubeVisitService in region

    错误如下: Caused by: org.apache.hadoop.hbase.ipc.RemoteWithExtrasException(org.apache.hadoop.hbase.excep ...

  7. maven启动tomcat访问报404（url中没有项目名）

    [INFO] Running war on http://localhost:8080/js_001(红色部分是项目名,要是没有的话是不能访问项目资源的) 但是我仍然不知道为什么有些maven项目却有 ...

  8. sentinel-dashboard安装、运行（ubuntu）

    下载页面https://github.com/alibaba/Sentinel/releases wget -P /opt/downloads https://github.com/alibaba/S ...

  9. 删除Docker中所有已停止的容器

    方法一: #显示所有的容器,过滤出Exited状态的容器,取出这些容器的ID, sudo docker ps -a|grep Exited|awk '{print $1}' #查询所有的容器,过滤出E ...

  10. 043 关于 loadrunner 返回 http 500 错误解决思路

    这个支持项目中,总是出现500的问题,后来发现是redis总是崩掉. 后来,在压力测试,500的问题,又开始不断出现,虽然不是我自己处理的,但是没少吃苦头. 看了这篇文章,感觉说的还是很有道理,如何来 ...