基于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,操作每个步骤,观赏每个能和我互动的交互设计效果 ...
随机推荐
- eclipse逐步调试
Eclipse 的单步调试 1.设置断点在程序里面放置一个断点,也就是双击需要放置断点的程序左边的栏目上.2.调试(1)点击"打开透视图"按钮,选择调试透视图,则打开调试透视图界面 ...
- php mysqli mysqli_query() mysqli_real_query()
2016年11月26日 15:22:27 星期六 场景: PHP从mysql中读取数据 1. 一次性读取所有数据返给PHP 2. 每次循环只读取一掉记录 数据量小的时候可以使用第一种方法, 数据量很大 ...
- ACM/ICPC 之 三维计算几何+暴力枚举+判重(HDU5839)
CCPC网赛第八题,求立体几何数量,题解见注释 //立体几何-求满足要求的四面体个数 //要求1:至少4条边相等 //要求2:四条边相等时,另两条边一定不相邻(即对边) //题解:以当前边为不相邻的其 ...
- repo 修改邮箱地址
需要重新运行 repo init 被带上参数: --config-name xx@a.com
- ABAP READ TABLE语句注意
READ TABLE 后注意判断 sy-subrc 是否等于0
- 基于netty轻量的高性能分布式RPC服务框架forest<上篇>
工作几年,用过不不少RPC框架,也算是读过一些RPC源码.之前也撸过几次RPC框架,但是不断的被自己否定,最近终于又撸了一个,希望能够不断迭代出自己喜欢的样子. 顺便也记录一下撸RPC的过程,一来作为 ...
- php学习中——知识点（1）
php是嵌入式脚本语言(意义也就不言而喻) 标识:<?php .... ?> 输出:echo "**"; 使用美元符号($)后跟变量名表示变量,区分大 ...
- swift中 if let 与 guard let 对比,guard会降低一个分支
//用if let与guard let实现同一效果,会发现guard降低一个分支 //可以用if var guard var 表示定义的变量能修改值 func test(){ let name:Str ...
- Shell 脚本实现随机抽取班级学生
#/bin/bash function rand(){ min=$ max=$(($-$min+)) num=$(date +%s%N) echo $(($num%$max+$min)) } rnd= ...
- 手把手教你玩转nginx负载均衡（一）----使用vitualBox创建虚拟机
引言 作为一个web程序员,有时候需要想尽办法来利用有限的资源来产生最大程度的负载,除了提高硬件配置,增加带宽之外,CDN加速,DNS加速,缓存,还可以利用反向代理.但是要说反向代理,就不的不说ngi ...