iscroll5 上拉，下拉 加载数据
我这里的思路是上拉时候只是加载第一页的内容，可根据实际情况修改其中的代码。请勿照搬。样式没怎么调，可以加载gif动画。
1.没有数据时候，下拉可以加载数据。
2.没有数据时候，点击也可以加载数据。
3.其余正常。 4.只要页面没有
<div id="pullDown">
<div class="pullDownLabel">正在加载中...</div>
</div> 这段代码就不会执行下拉加载数据。
//没有上拉时候用到的html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>财务返费</title>
<link href="../css/base.css" rel="stylesheet" type="text/css">
<link href="../css/my.css" rel="stylesheet" type="text/css">
<script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script><!--替换为zepto.js-->
<script type="text/javascript" src="../js/iscroll.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
</head>
<body>
<header class="header bgno">
<div class="top">
<a href="javascript:history.back()" class="back"></a>
<h1 class="title">活动资金</h1>
</div>
<div class="mybox">
<div class="acinfo">
<div class="disbox">
<div class="info disbox-1">
<p class="f16">可提现金额(元)</p>
<p class="orange f18">0.00</p>
</div>
<span><i class="icon orange f36">m</i></span>
</div>
</div>
</div>
<nav class="navTop mgt10">
<ul>
<li class="selected">
<a href="#" class="nava"><div class="area">所有</div></a>
</li>
<li>
<a href="#" class="nava"><div class="area">收入</div></a>
</li>
<li>
<a href="#" class="nava"><div class="area">支出</div></a>
</li>
</ul>
</nav>
</header>
<section id="downwraper" class="normal bot0 top2 ">
<div id="downscroller">
<div class="ntot right"><p class="black">共 <var class="red">51</var> 条冻结资金</p></div>
<div id="datalist">
</div>
<div id="pullUp">
<div class="pullUpLabel">上拉显示更多...</div>
</div>
</div>
</section>
<div class="fixedbg"> </div>
<script>
var page_data_url = 'data-huodong.html';
var condition_str = '';
var page_count =5;
$(function(){
//加载
var loadlist = new Loadlist({'pageUrl':page_data_url,'pageCondition':condition_str,'pageCount':page_count});
loadlist.loaded();
});
</script>
</body>
</html> //上拉时候用到的html:
<section id="downwraper" class="nodeBottom bot0 bgfff">
<div id="downscroller">
<div id="pullDown">
<div class="pullDownLabel">正在加载中...</div>
</div>
<div id="out">
<div id="datalist">
</div>
</div>
<div id="pullUp">
<div class="pullUpLabel">正在加载中...</div>
</div>
</div>
</section>
<div class="fixedbg navfixed"> </div>
<script>
//上拉
var strStop = true;
var page_data_url = '/chinalao/wap/public/sgrab/indexlist';
var noDataUrl = '/chinalao/wap/public/sgrab/indexmore';
var condition_str = 'dG90YWxfY291bnQ9MCZjaXR5aWQ9NDIyNg%3D%3D';
var page_count = 1;
var current_page = 1; var loadlist = new Loadlist({'pageUrl':page_data_url,'pageCondition':condition_str,"pageNoUrl":noDataUrl,'pageCount':page_count,'stopDown':strStop,'callback':function(){
//判断有无数据时候调用
if($("#datalist").outerHeight()<=($(window).height()-120)){
$("#out").height($(window).height()-120);
loadlist._setOptionStopDown(true);
}else{
$("#out").css("height","auto");
loadlist._setOptionStopDown(false);
}
}});
loadlist.loaded();
</script>
//css
/*iscroll {*/
#wrapper,
#citywraper,
#selectwraper,
#telwraper,
#downwraper,
#aboutwraper,
#allwraper {
position: absolute;
z-index: 1;
top: 48px;
bottom: 67px;
left: 0;
width: 100%;
overflow: hidden;
}
#wrapper.normal,#downwraper.normal {top:90px;}
#downwraper.bot0,#wrapper.bot0,#aboutwraper.bot0 {bottom: 0;}
#downwraper.top372,#wrapper.top372 {top:372px;}
#downwraper.top250,#wrapper.top250 {top:250px;}
#downwraper.top276,#wrapper.top276 {top:276px;}
#downwraper.top348,#wrapper.top348 {top:348px;}
#downwraper.top {top:157px;}
#downwraper.top2 {top:183px;}
#allwraper {top:88px; bottom:116px; z-index:3000; background:#fff;}
#scroller,
#telscroller,
#selectscroller,
#cityscroller,
#downscroller,
#aboutscroller,
#allscroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
/*}*/
//js:
;(function () {
var Loadlist = function(opt) {
var strScroll;
var pullUpEl, pullUpL;
var pullDownEl, pullDownL;
var loadingStep = 0;
var strHtml="";
var curpage = 1;
this.defaults = {
'pageUrl':"",
'pageCondition':"",
'pageNoUrl':"",
'pageCount':1,
'stopDown':false,
'callback':null
},
this.options = $.extend({}, this.defaults, opt);
this.stopDownMod = this.options.stopDown;
this.stopClick = false;
};
Loadlist.prototype = {
loaded: function() {
var pgCount=this.options.pageCount;
var _this = this;
pullDownEl = $('#pullDown');
pullDownL = pullDownEl.find('.pullDownLabel');
pullDownEl.attr('class','').hide(); pullUpEl = $('#pullUp');
pullUpL = pullUpEl.find('.pullUpLabel');
pullUpEl.attr('class','').hide();
strScroll = new IScroll('#downwraper', {
probeType: 2
});
//滚动时
strScroll.on('scroll', function(){
if(pullDownEl.length>0&&!pullDownEl.attr('class').match('flip|loading'&&loadingStep == 0) ){
if (this.y>5) {
//下拉刷新效果
pullDownEl.show();
pullDownEl.addClass('flip');
pullDownL.html('下拉显示更多...');
loadingStep = 1;
//下拉获取数据并改变条件
_this.getNoData(); //可删除 此为加载数据改变页面上的条件
//strScroll.refresh(); //修正跳动bug
}
}
if(loadingStep == 0&& !pullUpEl.attr('class').match('flip|loading')&&!_this.stopDownMod){
if (this.y < (this.maxScrollY - 5)) {
//上拉刷新效果
pullUpEl.show();
strScroll.refresh();
pullUpEl.addClass('flip');
if(pgCount>curpage){
pullUpL.html('上拉显示更多...');
}else{
pullUpL.html('已经是最后一页');
}
loadingStep = 1;
}
}
});
//滚动完毕
strScroll.on('scrollEnd',function(){
if(loadingStep == 1){
if(pullDownEl.length>0&&pullDownEl.attr('class').match('flip|loading')){
pullDownEl.removeClass('flip').addClass('loading');
pullDownL.html('正在加载...');
loadingStep = 2;
_this.pullDownAction();
}
if(pgCount>curpage){//如果当前页码小于总页数，即可执行翻页
if (pullUpEl.attr('class').match('flip|loading')) {
pullUpEl.removeClass('flip').addClass('loading');
pullUpL.html('正在加载...');
loadingStep = 2;
_this.pullUpAction();
}
}
} }); if(this.stopClick){
$("#downwraper").bind("click",function(){
_this.getData(1,true);
});
}
//第一次初始化数据
this.getData(1);
},
_getDataClick:function(){
this.getData(1,true);
},
_setOptionStopDown:function(ot){
this.stopDownMod = ot;
},
loadRefresh:function(){
strScroll.refresh();
},
pullDownAction:function(){
var _this = this;
setTimeout(function() {
_this.getData(1,true);
}, 1000);
},
pullUpAction:function(){
var _this = this;
setTimeout(function() {
_this.getData(curpage+1);
}, 1000);
},
pullDownGetData:function(){
pullDownEl.removeClass('loading');
pullDownL.html('下拉显示更多...');
pullDownEl['class'] = pullUpEl.attr('class');
pullDownEl.attr('class','').hide();
},
pullUpGetData:function(){
pullUpEl.removeClass('loading');
pullUpL.html('上拉显示更多...');
pullUpEl['class'] = pullUpEl.attr('class');
pullUpEl.attr('class','').hide();
},
getNoData:function(){
var _that = this;
$.ajax({
'url':_that.options.pageNoUrl,
'type':'GET',
'dataType':'json',
success:function(data){
if(data.status==1){
_that.options.pageCondition = data.condition_str;
$("#downwraper").unbind();
}else{
$("#downwraper").bind("click",function(){
_that.getData(1,true);
});
//$.AlertBox({title:'没有数据了'});
}
}
});
},
getData:function(pg,up){
var _that = this;
curpage = pg;
$.ajax({
'url':_that.options.pageUrl+'?str='+_that.options.pageCondition+'&page='+pg,
'type':'GET',
'dataType':'html',
'data':'',
beforeSend:function(){
if(curpage==1) {
$(".fixedbg").fadeIn(100);
$("#datalist").append("<div class='loading'></div>");
}
},
success:function(strHtml){
$('#datalist .loading').remove();
$(".fixedbg").fadeOut(100);
if(up){
$("#datalist").html(strHtml);
}else{
$("#datalist").append(strHtml);
}
_that.pullUpGetData();
_that.pullDownGetData();
loadingStep = 0;
if(typeof(_that.options.callback)=="function"){
_that.options.callback();
}
strScroll.refresh();
},
error:function(){ }
});
}
};
window.Loadlist = Loadlist;
}());
iscroll5 上拉，下拉 加载数据的更多相关文章
- mui前端框架下拉刷新分页加载数据
前台 mui.init(); (function($) { //阻尼系数 var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrap ...
- XE7 & FMX 那些年我们一起上过的控件：ListView 之 (3) 加载数据时如何显示自定义样式
本文介绍一下ListView下如何加载数据.及使用进度条反馈当前进度给用户. 注意: 原创作品,请尊重作者劳动成果,转载请注明出处!!!原文永久固定地址:http://www.cnblogs.com/ ...
- iscroll5 版本下的 上拉，下拉 加载数据
上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码. <section id="downwraper" class="nodeBottom bot0 bgf ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- 分页插件思想：pc加载更多功能和移动端下拉刷新加载数据
感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...
- jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- 自己定制ListView，上拉刷新和下拉刷新，加载网络图片，并且添加缓存机制。
package com.lixu.listviewrefresh; import java.util.ArrayList; import java.util.HashMap; import java. ...
- mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
随机推荐
- mac系统，git上刚刚checkout出来的文件，一检查，发现已经被修改过了，怎么破？？？
如下图中所示: 事实上,checkout之后什么都还没做,这些文件为何就被修改? 检查一下别的电脑上所存放的同一套源码,原来出问题的文件都是同名文件,只不过是有大小写区分而已!!! linux系统可以 ...
- QT征程之初识qt
下载 https://www.qt.io/cn/download-open-source/ 下载QT离线安装包 Qt 5.5.1 for Linux 32-bit (546 MB) (info ...
- 【Python全栈笔记】05 [模块二] 19 Oct 文件的操作
文件操作 一般步骤1. 文件打开 2. 文件操作 3. 文件关闭 1. 打开文件 使用open(文件名(绝对路径), 打开模式, 编码) 文件打开的模式有: r: 只读模式(默认) w: 只写模式 ...
- selenium—八种定位方法
find_element_by_id() find_element_by_name() find_element_by_class_name() find_element_by_tag_name() ...
- javascript全局变量和局部变量
局部变量和全局变量可以同名.不过在函数体内部,局部变量的优先级高于全局变量.需要格外注意:专用于函数体内部的变量一定要用var关键字声明,否则该变量会变成全局变量.因为js是弱类型语言,所以它可以存放 ...
- Java基础知识系列——数组
数组是我们在编程中常用到的一种数据结构. 数组创建有三种方式,以int类型为例: 1.int value[] = new int[]{1,2,3,4,5}; //{}中的是元素 2.int value ...
- scp详解
scp 命令 ================== scp 可以在 2个 linux 主机间复制文件: 命令基本格式: scp [可选参数] file_source file_targe ...
- 自动生成查找组件的lua代码
本篇主要解决的问题是使用lua脚本编写unity业务逻辑时,自动生成一些查找组件及绑定控件事件的lua代码! 现在很多unity项目都是用ulua作为热更新解决方案,因此需要用lua来写相关的逻辑,经 ...
- NGUI 灰化按钮或图标
在游戏中某些地方可能需要对按钮进行灰化显示,从而表示不能点击!在网上找了一下有些方法是直接用UITexture+灰化shader去做这件事!另外有些方案写的不太清楚,看不懂!不过也基本都是要使用灰化s ...
- ubuntu14.04 安装系统
p { margin-bottom: 0.1in; line-height: 120% } code.cjk { font-family: "Droid Sans Fallback" ...