基于zepto的H5/移动端tab切换触摸拖动加载更多数据

以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据，在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件，这个插件用起来也很好，很感谢西门的后花园作者。我以前在项目中用的也是这个插件，后来我老大说能不能做成那种向上拖动才会加载更多的效果，不要这种滚动到底部就加载，于是我就使用了iscroll。

以下代码是加入了从数据库读取数据并判断数据全部加载完成的效果（事实是只模拟了从数据库读取数据，在使用时可将post请求的url和data换成你自己的就可以了），在本页的最后附上了模拟的代码可供下载查看。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>基于zepto的移动端/H5触摸拖动加载更多数据</title>

<style>

*{margin:0;padding:0;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}

body{background:#f1f1f1;color:#666;}

li{list-style-type:none;}

a{text-decoration:none;color:#666;}

.tabsNav{overflow:hidden;padding:10px 15px;position:fixed;left:0;top:0;width:100%;z-index:2;background:#666;}

.tabsNav li{float:left;width:50%;text-align:center;height:30px;line-height:30px;font-size:14px;background:#f1f1f1;}

.tabsNav li.cur{background:#f00;color:#fff;}

.tabs_con{display:none;background:#fff;font-size:12px;}

.tabs_con li{height:40px;line-height:40px;border-bottom:1px solid #e9e9e9;padding-left:10px;}

#wrapper{position:absolute;z-index:1;top:45px;bottom:48px;width:100%;overflow:auto;}

#scroller{position:absolute;z-index:1;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%;}

#pullDown, #pullUp{height:40px;line-height:40px;font-size:12px;color:#888;text-align:center;}

#pullDown .pullDownIcon, #pullUp .pullUpIcon{position:absolute;margin:8px 0 0 30%;width:24px;height:24px;background:url(images/arrow.png) 0 0 no-repeat;

	-webkit-background-size:auto 100%;

	background-size:auto 100%;

	-webkit-transition-property:-webkit-transform;

	-webkit-transition-duration:250ms;

}

#pullDown .pullDownIcon{-webkit-transform:rotate(0deg) translateZ(0);}

#pullUp .pullUpIcon{-webkit-transform:rotate(-180deg) translateZ(0);}

#pullDown.flip .pullDownIcon{-webkit-transform:rotate(-180deg) translateZ(0);}

#pullUp.flip .pullUpIcon {-webkit-transform:rotate(0deg) translateZ(0);}

#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon{background-image: url(images/loader.png);background-size:100% auto;background-position:0 100%;

	-webkit-transform:rotate(0deg) translateZ(0);

	-webkit-transition-duration:0ms;

	-webkit-animation-name:loading;

	-webkit-animation-duration:2s;

	-webkit-animation-iteration-count:infinite;

	-webkit-animation-timing-function:linear;

}

@-webkit-keyframes loading {

	from{-webkit-transform:rotate(0deg) translateZ(0);}

	to{-webkit-transform:rotate(360deg) translateZ(0);}

}

</style>

</head>

<body>

<ul class="tabsNav">

	<li class="cur">公告</li>

	<li>消息</li>

</ul>

<div id="wrapper">

	<div id="scroller">

		<div class="pullDown" id="pullDown">

			<div class="pullDownIcon"></div><div class="pullDownLabel">下拉刷新</div>

		</div>

		<div class="tabs_con" style="display:block;">

			<ul></ul>

		</div>

		<div class="tabs_con">

			<ul></ul>

		</div>

		<div class="pullUp" id="pullUp">

			<div class="pullUpIcon"></div><div class="pullUpLabel">上拉加载更多</div>

		</div>

	</div>

</div>

<script src="js/zepto.min.js"></script>

<script src="js/iscroll.js"></script>

<script>

	var pageNoticeIndex = 1,    //当前页

		pageMsgIndex = 1,

        pageSize = 5,   //每页数量

        load1More = false,   //判断是否全部加载完毕

        load2More = false;

    //tab切换

	$('.tabsNav li').on('click',function(){

		var $this = $(this),

		    curIndex = $this.index();

		$this.addClass('cur').siblings('li').removeClass('cur');

		$('.tabs_con').eq(curIndex).css("display","block").siblings('.tabs_con').css("display","none");

		myScroll.scrollTo(0, 0);   //确保每次切换时scroll回到初始起点

		myScroll.refresh();        //每次切换时都要调用界面更新方法

		if(curIndex == 0){

			if(!load1More){

				$("#pullUp").html('<div class="pullUpIcon"></div><div class="pullUpLabel">上拉加载更多</div>');

			}else{

				$("#pullUp").html("已无更多数据");

			}

		}else if(curIndex == 1){

			if(!load2More){

				$("#pullUp").html('<div class="pullUpIcon"></div><div class="pullUpLabel">上拉加载更多</div>');

			}else{

				$("#pullUp").html("已无更多数据");

			}

		}

	});	

	//公告

	pageNoitce(pageNoticeIndex, 0);    //初始化加载数据    第一个参数是当前页，第二个参数是当前选中的tab的索引

    function pageNoitce(pageIndex, curIndex) {

        var html = "";

        $.post(url, data, function (success) {

            if (success != null && success.status == 1) {

                for (var i = 0; i < success.data.length; i++) {

                    html += '<li><a href="#">'+success.data[i].Title + '</a></li>';

                }

                var pageCount = parseInt(success.page.totRecord);

                var page = Math.ceil(pageCount / pageSize);

                if (page == pageIndex) {

                    load1More = true;

                }

                $(".tabs_con").eq(curIndex).children("ul").append(html);

            }

        }, "json");

    }

    //消息

    pageMsg(pageMsgIndex, 1);

    function pageMsg(pageIndex, curIndex) {

    	var html = "";

        $.post(url, data, function (res) {

            if (res != null && res.status == 1) {

                for (var i = 0; i < res.data.length; i++) {

                    html += '<li><a href="#">' + res.data[i].Title + '</i></a></li>';

            	}

                var pageCount = parseInt(res.page.totRecord);

                var page = Math.ceil(pageCount / pageSize);

                if (page == pageIndex) {

                    load2More = true;

                }

                $(".tabs_con").eq(curIndex).children("ul").append(html);

            }

        },"json");

	}

	var myScroll;	

	function pullDownAction () {

		setTimeout(function () {

			myScroll.refresh();

		}, 1000);

	}

	function pullUpAction () {

		setTimeout(function () {

			var curIndex = $(".cur").index();

			if(curIndex == 0){

				if(!load1More){

					pageNoticeIndex += 1;

	        		pageNoitce(pageNoticeIndex, curIndex);

				}else{

					$("#pullUp").html("已无更多数据");

				}

	        }else if(curIndex == 1){

	        	if(!load2More){

					pageMsgIndex += 1;

	        		pageMsg(pageMsgIndex, curIndex);

				}else{

					$("#pullUp").html("已无更多数据");

				}

	        }

			myScroll.refresh();

		}, 1000);

	}

	function loaded() {

		var pullDownEl = $('#pullDown'),

			pullDownHeight = pullDownEl.height(),

			pullUpEl = $('#pullUp'),

			pullUpHeight = pullUpEl.height(),

			pullDownLabel = $('.pullDownLabel'),

			pullUpLabel = $('.pullUpLabel');

		myScroll = new iScroll('wrapper', {

			topOffset: pullDownHeight - 5,

			onRefresh: function () {

				if (pullDownEl.hasClass('loading')) {

					pullDownEl.removeClass();

					pullDownLabel.html("下拉刷新");

				} else if (pullUpEl.hasClass('loading')) {

					pullUpEl.removeClass();

					pullUpLabel.html("上拉加载更多");

				}

			},

			onScrollMove: function () {

				if (this.y > 5 && !pullDownEl.hasClass('flip')) {

					pullDownEl.removeClass().addClass('flip');

					pullDownLabel.html("释放立即刷新");

					this.minScrollY = 0;

				} else if (this.y < 5 && pullDownEl.hasClass('flip')) {

					pullDownEl.removeClass();

					pullDownLabel.html("下拉刷新");

					this.minScrollY = -pullDownHeight;

				} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.hasClass('flip')) {

					pullUpEl.removeClass().addClass('flip');

					pullUpLabel.html("释放加载更多");

					this.maxScrollY = this.maxScrollY;

				} else if (this.y > (this.maxScrollY + 5) && pullUpEl.hasClass('flip')) {

					pullUpEl.removeClass();

					pullUpLabel.html("上拉加载更多");

					this.maxScrollY = pullUpHeight;

				}

			},

			onScrollEnd: function () {

				if (pullDownEl.hasClass('flip')) {

					pullDownEl.removeClass().addClass('loading');

					pullDownLabel.html("加载中...");

					pullDownAction();

				} else if (pullUpEl.hasClass('flip')) {

					pullUpEl.removeClass().addClass('loading');

					pullUpLabel.html("加载中...");

					pullUpAction();

				}

			}

		});

	}

	document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

	document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

</script>

</body>

</html>

效果如下图：

基于zepto的移动端/H5触摸拖动加载更多数据DEMO代码下载

基于zepto的H5/移动端tab切换触摸拖动加载更多数据的更多相关文章

移动端touch事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
移动端web页面上滑加载更多功能
背景介绍: 开发企业微信的一个应用,实现在企业微信中调用自己程序页面,页面加载多模块数据,向下滑加载更多,等等等等,一波三折然后很早就成功了是这样实现的: html: <div id=&quo ...
页面上有tab,如何点击加载更多?
加载更多是一个很简单的东西.但是也有几点需要注意: 1.首先在你切换tab的时候,要么在调用这个函数的时候将这个的thispage设为1,要么在切换tab的时候将这个thispage设为1,当你将这个 ...
基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]
使用方法引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...
h5 实现页面上拉加载更多数据
您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...
H5页面基于iScroll.js插件实现下拉刷新，上拉加载更多
前言在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...

随机推荐

最常用的ES6特性(转)
最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...
推荐一篇关于REST 和 SOAP区别的文章
写的很出色! https://www.ibm.com/developerworks/cn/webservices/0907_rest_soap/ 我的感觉就是REST针对的是资源,通过api的URL就 ...
OpenGL中坐标系的理解（一）
在OpenGL中,存在着至少存在着三种矩阵,对应着函数glMatrixMode()的三个参数:GL_MODELVIEW,GL_PROJECTION,GL_TEXTURE. 以下主要描述GL_MODEL ...
[转]C/C++ 程序员必须收藏的资源大全
from: https://github.com/jobbole/awesome-cpp-cn C++ 资源大全中文版我想很多程序员应该记得 GitHub 上有一个 Awesome – XXX 系列 ...
js变量及其作用域（附例子及讲解）
Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量工具/原料 Ch ...
Unity Cookie
1 在Unity里面,选择脚本单击左键打开 Sync Mono Development 这样就可以打开整个工程的脚本文件进而才能在脚本中继续进行切换 Mesh MeshFilt ...
python windows时间同步工具
由于某种原因(BIOS电池没电),电脑的系统时间会与我们的北京时间不同步,将会导致如下问题: 1. 抢火车票的时候已经过时间了 2.别的同事都走了,你还以为没下班 …… 规避问题的方法:同步系统时间 ...
Duilib源码分析(四)绘制管理器—CPaintManagerUI—(前期准备一)
上节中提到在遍历创建控件树后,执行了以下操作: 1. CDialogBuilder构建各控件对象并形成控件树,并返回第一个控件对象pRoot: 2. m_pm.AttachDialo ...
Denormalization
Denormalization In computing, denormalization is the process of attempting to optimize the read perf ...
Launching web on MyEclipse Tomcat 问题
错误提示: Launching web on MyEclipse Tomcat has encountered a problemAn internal error occurred during: ...

基于zepto的H5/移动端tab切换触摸拖动加载更多数据

基于zepto的H5/移动端tab切换触摸拖动加载更多数据的更多相关文章

随机推荐

热门专题