iscroll5 版本下的 上拉,下拉 加载数据
上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码。
<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><br><br>
<script><br> //上拉
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>
<script>
//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();
//应该放到用到的页面中,在回调函数中调用^-^!.
iconLoad();//info load icon
//
},
error:function(){ }
});
}
};
window.Loadlist = Loadlist;
}());
</script>
参考:http://www.w2bc.com/Article/49414
iscroll5 版本下的 上拉,下拉 加载数据的更多相关文章
- mui前端框架下拉刷新分页加载数据
前台 mui.init(); (function($) { //阻尼系数 var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrap ...
- iscroll5 上拉,下拉 加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
- 自己定制ListView,上拉刷新和下拉刷新,加载网络图片,并且添加缓存机制。
package com.lixu.listviewrefresh; import java.util.ArrayList; import java.util.HashMap; import java. ...
- vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- listview下拉刷新 上拉(滑动分页)加载更多
最 近做的类似于微博的项目中,有个Android功能要使用到listview的向下拉刷新来刷新最新消息,向上拉刷新(滑动分页)来加载更多.新浪微博就是使用这种方式的典型.当用户从网络上读取微博的时候, ...
- 向上滚动或者向下滚动分页异步加载数据(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 ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
随机推荐
- javascript之Function函数
在javascript里,函数是可以嵌套的. 如: function(){ funcrion square(x){ return x*x; } return square(10); } 在javas ...
- Oracle 10g体系机构及安全管理《思维导图》
通过学习Oracle数据库后,我对数据库又有了进一步的了解,Oracle数据库 10g体系机构分为 物理和逻辑存储结构. 下面是我对Oracle数据库做的思维导图和笔记 (全屏查看:<思维导图& ...
- Redhat关闭SELinux和防火墙的办法(转)
Redhat使用了SELinux来增强安全,关闭的办法为:1. 永久有效修改 /etc/selinux/config 文件中的 SELINUX="" 为 disabled ,然后重 ...
- 【UVA 11997 K Smallest Sums】优先级队列
来自<训练指南>优先级队列的例题. 题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18702 题意:给定 ...
- Eclipse文件覆盖问题
window-preferences-General-Search找到第一行的一个选项 Reuse editors to show matches他的意思是说在同一个编辑里面显示匹配的文件,如果后面有 ...
- 【Unity3d】【项目学习心得】从资源server下载资源(一)
项目里面的很多资源都是从资源server载入的,这样子能够减小client的包大小. 所以我们须要一个专门的类来管理下载资源. 资源分非常多类型,如:json表,txt文件,image文件,二进制文件 ...
- MonoDevelop with Visual Studio to Linux and Mac OSX maintaining a single code base for all platforms.
Home | Screenshots | Download | Contact | FAQ | Documentation | Development | Search MonoDevelop i ...
- strcpy与memcpy的区别
strcpy和memcpy的区别 strcpy和memcpy都是标准C库函数,它们有下面的特点. strcpy提供了字符串的复制.即strcpy只用于字符串复制,并且它不仅复制字符串内容之外,还会复制 ...
- stagefright框架(七)-Audio和Video的同步
讲完了audio和video的处理流程,接下来要看的是audio和video同步化(synchronization)的问题.OpenCORE的做法是设置一个主clock,而audio和video就分别 ...
- 为net-snmp添加读readTimeTicks
function readTimeTicks(time){ if(time === 0) return ''; var d = 0, h = 0, m = 0, s = 0; d = parseInt ...