在使用Scrolling开发app的过程中,遇到了很多问题,demo给的例子是下拉永远有数据的情况,而我的数据是有限的,也就是下拉一定次数后,下拉实际上就没有新数据,也就是不需要再继续下拉了。当上拉刷新数据后,才可以继续下拉。本以为只需要添加一个判断就可以了,谁知道当下拉到没有数据后,再上拉刷新,然后下拉竟然下拉不了了!!
具体代码参考http://blog.csdn.net/xuexiaodong009/article/details/18794909
核心代码精简如下:
~~~
var myScroller;
var hasMorePage = true;
myScroller = $("#" + listPaneId).scroller();
myScroller.addInfinite();
myScroller.addPullToRefresh();
$.bind(myScroller, 'scrollend', function () {
// console.log("scroll end"); 目前未使用
});
$.bind(myScroller, 'scrollstart', function () {
// console.log("scroll start");目前未使用
});
$.bind(myScroller, "refresh-trigger", function () {
// console.log("refresh-trigger");目前未使用
});
$.bind(myScroller, "refresh-release", function () {
hasMorePage = true;//默认可以可以下拉
//清空原来的数据,通过ajax重新加载第一页的数据
});
$.bind(myScroller, "refresh-cancel", function () {
// console.log("refresh-cancel");目前未使用
});
$.bind(myScroller, "refresh-finish", function () {
// console.log("refresh-finish");目前未使用
});
myScroller.enable();
$.bind(myScroller, "infinite-scroll", function () {
var self = this;
if (!hasMorePage) {//没有数据了,则直接返回,不在下拉
// self.clearInfinite();
return;
}
$(this.el).append("<div id='infinite' style='height:60px;line-height:60px;text-align:center;font-weight:bold'>正在读取数据</div>");
$.bind(myScroller, "infinite-scroll-end", function () {
$.unbind(myScroller, "infinite-scroll-end");
self.scrollToBottom();
//通过ajax读取数据,再返回数据后,判断是否还有多余的数据,设置标志量hasMorePage
});
});
~~~
没有办法只能一步步测试,首先放开console.的注释,发现,可以下拉时会触发infinite-scroll事件,可是我改动后,下拉时根本就触发不了infinite-scroll事件了,自然也就不能下拉刷新数据了。
然后打开af.scroller.js文件,查找和触发infinite-scroll事件有关的代码,找到几处代码,一处如下:
~~~
if (this.infinite && !this.infiniteTriggered) {
if ((Math.abs(scrollInfo.y) >= (this.el.clientHeight - this.container.clientHeight))) {
var self = this;
setTimeout(function(){
self.infiniteTriggered = true;
$.trigger(self, "infinite-scroll");
},scrollInfo.duration-50);
}
}
~~~
发现要触发infinite-scroll事件,都要判断this.infinite,this.infiniteTriggered,再进一步调试,发现之所以不再触发是因为this.infiniteTriggered变量的值不对。
然后再看看有没有修改this.infiniteTriggered变量的值值得方法,最终找到了clearInfinite方法。
知道了原因修就很简单了,只需要添加一行代码。
~~~
if (!hasMorePage) {//没有数据了,则直接返回,不在下拉
self.clearInfinite();//添加的一行代码
return;
}
~~~
- 前言
- 使用jqMobi开发app基础
- jqMobi开发app页面注意事项
- 使用jqMobi开发app基础:定义header
- 使用jqMobi开发app基础:定义footer
- 使用jqMobi开发app基础:通过panel添加内容
- 使用jqMobi开发app基础:panel属性data-defer介绍
- 使用jqMobi开发app基础:Side Menu
- 使用jqMobi开发app基础:Styled Lists布局
- 使用jqMobi开发app基础:Grid布局
- 使用jqMobi开发app基础:响应式布局介绍
- 使用jqMobi开发app基础:Toggle Switches开关按钮
- 使用jqMobi开发app基础:HTML5 LocalStorage 本地存储
- 使用jqMobi开发app基础:登录页面的实现
- 使用jqMobi开发app基础:注销页面的实现
- 使用jqMobi开发app基础:viewport指令
- 使用jqMobi开发app基础:a标签的使用
- 使用jqMobi开发app基础:Scrolling的使用,向上向下拖动,动态添加数据
- 使用jqMobi开发app基础:页面传值方式
- 使用jqMobi开发app基础:panel之间的跳转方式
- 使用jqMobi开发app基础:panel之间的跳转方式总结
- 使用jqMobi开发app基础:下拉select
- 使用jqMobi开发app基础:真的只能存在一个DOM吗?
- 使用jqMobi开发app基础:使用 jQuery
- 使用jqMobi开发app基础:Scrolling的使用,拖动后大量空白的解决方法
- 使用jqMobi开发app基础:Scrolling的使用,停止和继续拖动有关的问题
- 使用jqMobi开发app基础:Badge的使用
- 使用jqMobi开发app基础:如何拨打电话?
- 使用jqMobi开发app基础:弹出内容的设计