上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码。

<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 版本下的 上拉,下拉 加载数据的更多相关文章

  1. mui前端框架下拉刷新分页加载数据

    前台 mui.init(); (function($) { //阻尼系数 var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrap ...

  2. iscroll5 上拉,下拉 加载数据

    我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...

  3. 自己定制ListView,上拉刷新和下拉刷新,加载网络图片,并且添加缓存机制。

    package com.lixu.listviewrefresh; import java.util.ArrayList; import java.util.HashMap; import java. ...

  4. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  5. listview下拉刷新 上拉(滑动分页)加载更多

    最 近做的类似于微博的项目中,有个Android功能要使用到listview的向下拉刷新来刷新最新消息,向上拉刷新(滑动分页)来加载更多.新浪微博就是使用这种方式的典型.当用户从网络上读取微博的时候, ...

  6. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  7. 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  8. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  9. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

随机推荐

  1. 活生生的例子:qInstallMessageHandler接受指定类型的函数指针,这样就可以随心所欲的让程序员自定义函数名以及函数位置

    理论:qInstallMessageHandler是被定义在全局空间里: http://doc.qt.io/qt-5/qtglobal.html#QtMessageHandler-typedef 实践 ...

  2. java设计模式--创建模式--工厂方法

    工厂方法定义: 工厂方法 概述 定义一个用于创建对象的接口,让子类决定实例化哪一个类.FactoryMethod使一个类的实例化延迟到其子类. 适用性 .当一个类不知道它所必须创建的对象的类的时候. ...

  3. bzoj1645 [Usaco2007 Open]City Horizon 城市地平线

    Description Farmer John has taken his cows on a trip to the city! As the sun sets, the cows gaze at ...

  4. Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客

    Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼

  5. ORM框架Hibernate (一) 对DAO封装和抽象

    说明 前面已经给大家介绍了Struts这个框架,Struts是对Web项目的表示层进行了封装,而Hibernate是对Web项目中DAO层进行封装,也即是.NET中我们常用到的D层封装,即对访问数据库 ...

  6. lua 类继承和实现

    http://blog.csdn.net/ssihc0/article/details/7742323 Account={balance=}; --新建了一个对像,他有一个属性balance func ...

  7. [KMP求最小循环节][HDU3746][Cyclic Nacklace]

    题意 给你个字符串,问在字符串末尾还要添加几个字符,使得字符串循环2次以上. 解法 无论这个串是不是循环串 i-next[i] 都能求出它的最小循环节 代码: /* 思路:kmp+字符串的最小循环节问 ...

  8. Python-windows服务-重启自动化

    一. 前言 有了上一篇的“python初学”的基础,咱们就有了python的开发包,有了开发环境IDE,那我们就可以干活了.我的第一个选题就是让我们的windows服务可以按照我们的意愿进行自动重启. ...

  9. spring 配置和实例

    Spring 是一个开源框架.Spring 为简化企业级应用开发而生. 使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能.Spring 是一个 IOC(DI) ...

  10. Unicode-字符编码的历史由来(转)

    http://www.nowamagic.net/internet/internet_CharsetHistory.php 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以 ...