使用jqMobi开发app基础：Scrolling的使用，停止和继续拖动有关的问题详解手机开发

   在使用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; 
            }