基于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,操作每个步骤,观赏每个能和我互动的交互设计效果 ...
随机推荐
- Unity3D配合AndroidStudio打包
SET UNITY_PATH="C:\Program Files\Unity\Editor\Unity.exe" echo UNITY_PATH=%UNITY_PATH% SET ...
- UFLDL 教程三总结与答案
主成分分析(PCA)是一种能够极大提升无监督特征学习速度的数据降维算法.更重要的是,理解PCA算法,对实现白化算法有很大的帮助,很多算法都先用白化算法作预处理步骤.这里以处理自然图像为例作解释. 1. ...
- js中JSON格式数据的转化
JSON.parse(STRING) => OBJECT JSON.stringify(OBJECT) => STRING
- 关于VPN的一些问题
在今在外出差,必须得连上公司的数据库,那就得使用VPN了,设置起来还算比较简单(我是win10), 简单介绍一下: 打开设置或者直接点击右下角的
- IE不能上网，但是其他浏览器可以
打开IE_工具_internet选项_连接_局域网设置_(勾选)自动检测配置其它的勾去掉,确定.
- 阿里云centos7基于搭建VPN
本文参考自:http://www.xxkwz.cn/1495.html 前段时间使用pptp搭建了一个VPN,速度很快,但是用了大概一个月挂了,估计是被墙了吧,于是,用shadowsocks重新搭建了 ...
- iOS JSON、NSDictionary互转
#import "myCode.h" @implementation myCode /*! * @brief 把格式化的JSON格式的字符串转换成字典 * @param jsonS ...
- 两个单选按钮(一个是，一个否 ),一个div层,实现点击隐藏,显示div
<script type="text/javascript"> function diva(){ document.getElementById('div1').sty ...
- HCP查询配置
1.配置命名空间Service里的Search功能为enable以及索引等相关配置 2.配置用户对该命名空间的查询为允许
- 【Java并发系列02】Object的wait()、notify()、notifyAll()方法使用
一.前言 对于并发编程而言,除了Thread以外,对Object对象的wati和notify对象也应该深入了解其用法,虽然知识点不多. 二.线程安全基本知识 首先应该记住以下基本点,先背下来也无妨: ...