基于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,操作每个步骤,观赏每个能和我互动的交互设计效果 ...
随机推荐
- git: fatal: Not a git repository (or any of the parent directories): .git
在看书 FlaskWeb开发:基于Python的Web应用开发实战 时,下载完源码后 git clone https://github.com/miguelgrinberg/flasky.git 试着 ...
- java 深入技术八（内省）
1. javabean的软件设计思想 2.内省:封装了java反射,提供直接操作属性的Setter和getter方法的方法 3.核心API:BeanInfo java 的描述信息,Introspect ...
- python正则表达式re
Python正则表达式: re 正则表达式的元字符有. ^ $ * ? { [ ] | ( )．表示任意字符［］用来匹配一个指定的字符类别,所谓的字符类别就是你想匹配的一个字符集,对于字符集中的字符可 ...
- SAP 出库单新版
*&---------------------------------------------------------------------* *& Report ZSDR045 ...
- SpringMVC后台接收list类型的数据的实现方式
一.背景 最近在做一些东西的时候,遇到一个需要Springmvc后台接收list类型数据的需求,几经辗转才完美解决了这个问题,今天记下来方便以后使用,也分享给需要的小伙伴们~ 二.实现方式 1.实现方 ...
- 分享一个常用Adb命令
分享一个常用Adb命令 首先 首先感谢@xuxu的常用adb命令,收益良多,但是已经不能满足于我,所以补充了下. 再者 好久没发帖了,最近论坛老司机们都在讨论/总结,我就用这个干货回报吧. 最后 基于 ...
- Docker常用命令大全
1. 查看docker信息(version.info) # 查看docker版本 $docker version # 显示docker系统的信息 $docker info 2. 对image的操作(s ...
- Excel文件下载功能
HtmlTextWriter:能够帮助我们快速生成html语句. 下载功能实现代码 protected void Button1_Click(object sender, EventArgs e) { ...
- python import cv2 出错：cv2.x86_64-linux-gnu.so: undefined symbol
之前写过一个python使用opencv处理图片的脚本,当时是可以使用的,现在突然发现执行时出错: ImportError: /usr/lib/python2.7/dist-packages/cv2. ...
- Datazen笔记索引
Datazen介绍 http://www.cnblogs.com/aspnetx/p/4557547.html Datazen安装 http://www.cnblogs.com/aspnetx ...