使用jqMobi开发app基础:Scrolling的使用,向上向下拖动,动态添加数据

     官网上Scrolling写的很简单。但自己要使用,却得试验很多次。

    

   例如要实现如下简单的功能:也就是动态加载数据,不管用户向上拖动还是向下拖动,都动态加载数据。

   使用jqMobi开发app基础:Scrolling的使用,向上向下拖动,动态添加数据


第一步自然是研究demo了。demo一开始就有很多内容。

对应的脚本也很简单:

 <script>
                        var myScroller;
                        $.ui.ready(function () {
                            myScroller = $("#webslider").scroller(); //Fetch the scroller from cache
                            //Since this is a App Framework UI scroller, we could also do
                            // myScroller=$.ui.scrollingDivs[‘webslider‘];
                            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");
                            });
                            
                            var hideClose;
                            $.bind(myScroller, "refresh-release", function () {
                                console.log("refresh-release");
                                var that = this;
                                clearTimeout(hideClose);
                                hideClose = setTimeout(function () {
                                    console.log("hiding manually refresh");
                                    that.hideRefresh();
                                }, 5000);
                                return false; //tells it to not auto-cancel the refresh
                            });

                            $.bind(myScroller, "refresh-cancel", function () {
                                console.log("refresh-cancel");
                                clearTimeout(hideClose);
                            });
                            
                            $.bind(myScroller, "refresh-finish", function () {
                                console.log("refresh-finish");
                            });
                            
                            myScroller.enable();

                            $.bind(myScroller, "infinite-scroll", function () {
                                var self = this;
                                console.log("infinite triggered");
                                $(this.el).append("<div id=‘infinite‘ style=‘height:60px;line-height:60px;text-align:center;font-weight:bold‘>Fetching content...</div>");
                                $.bind(myScroller, "infinite-scroll-end", function () {
                                    $.unbind(myScroller, "infinite-scroll-end");
                                    self.scrollToBottom();
                                    setTimeout(function () {
                                        $(self.el).find("#infinite").remove();
                                        self.clearInfinite();
                                        $(self.el).append("<div>This was loaded via inifinite scroll<br>More Content</div>");
                                        self.scrollToBottom();
                                    }, 3000);
                                });
                            });
                            $("#webslider").css("overflow", "auto");
                        });
                    </script>

 进过测试,只要把$.bind(myScroller, "infinite-scroll-end", function () {里边的内容改写后,就可以动态的从后台读取数据。

  然后我删除了,不需要的div,发现,在没有任何内容后,没法拖动了!!看来在拖动之前必须添加一定的内容,然后才能拖动。我是用的是panel的属性data-load

基本的代码:

 <div id="jiekuanshenpi" class="panel" data-load="loadFirstpage" data-defer="jiekuanshenpi.html"   data-tab="navbar_picture">    
              <script type="text/javascript">
                function loadFirstpage() {
         var url = serviceUrl + "UIPhoneAjax/GetData.ashx?type=jiekuanshenqinglist";
         $.post(url, null, function (res) {
             if (res.IsSuccess) {
                 var obj = $.parseJSON(res.Msg);
                 for (var i = 0; i < obj.length; i++) {
                     var item = obj[i];
                     ($("#jiekuanshenpi")).append("<div>" + item.SUNAME + "预借金额" + item.Fploanmoney + ";标题" + item.RR_TITLE + "申请时间" + item.RR_CREATEDATE + ";借款原因" + item.Floancause + "</div><br/>");
                 }

             } else {
                 $("#afui").popup(res.Msg);
             }
         }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败!"); })
     }
     </script>
            </div>

 发现第一部分的内容是加进去了,但发下,拖动没反应了,而且页面上出现了很大的一片空白。

  查看页面元素,才发现,内容加的位置不对。

不是($("#jiekuanshenpi")).append(),而应该是jiekuanshenpi下的一个元素。

改为($("#jiekuanshenpi .afScrollPanel"))就好了。

第二步发现读取数据的提示信息会出现多次?

  测试demo没发现,看来是我哪块改错了。我知道是 $.bind(myScroller, "infinite-scroll",执行了多两次,但没有什么好方法,只能设置一个标志量了。

  加了标志量后,没有读取数据的提示信息只有一次了。

第三步 为了能够是每次读取的数据不一样,还应该添加一个标示量。例如:第几页。

第四步 向下拖动,给最上边添加数据

  初步测试demo只是每次都是先上拖动,给最下边添加读取的内容。

  经过测试发现可以改写方法 $.bind(myScroller, "refresh-trigger", function () { {就可以满足需求。


   其他的几个方法:scrollend,scrollstart,refresh-trigger,refresh-cancel,refresh-finish目前尚未发现有什么作用。

 修改后的js代码:

   var pageindex = 0;
     var isfinishread=true;
     var myScroller;
      function addDataToBottom(Msg) {      
          var obj = $.parseJSON(Msg);
          var text=""
            for (var i = 0; i < obj.length; i++) {
                var item = obj[i];
                text+="<div class=‘data‘>" + item.SUNAME + "预借金额" + item.Fploanmoney + ";标题" + item.RR_TITLE + "申请时间" + item.RR_CREATEDATE + ";借款原因" + item.Floancause + "</div><br/>";
            }
            ($("#jiekuanshenpi .afScrollPanel")).append(text);
      }
        function addDataToTop(Msg) {      
            var obj = $.parseJSON(Msg);
            var text="";
            for (var i = 0; i < obj.length; i++) {
                var item = obj[i];                           
             text+="<div class=‘data‘>" + item.SUNAME + "预借金额" + item.Fploanmoney + ";标题" + item.RR_TITLE + "申请时间" + item.RR_CREATEDATE + ";借款原因" + item.Floancause + "</div><br/>";
            }
           $(text).insertBefore( $("#jiekuanshenpi .data")[0]);
      }
     function loadFirstpage() {
         var url = serviceUrl + "UIPhoneAjax/GetData.ashx?type=jiekuanshenqinglist";
          var para = {
                     pageindex: pageindex,                  
                 };
         $.post(url, para, function (res) {         
             if (res.IsSuccess) {               
                addDataToBottom(res.Msg);
             } else {
                 $("#afui").popup(res.Msg);
             }
         }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败!"); })
         pageindex++;
     }
 
     $.ui.ready(function () {
         myScroller = $("#jiekuanshenpi").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");
            myScroller.scrollToTop();
               var that = this;
                 var para = {
                     pageindex: pageindex,                  
                 };
                 var url = serviceUrl + "UIPhoneAjax/GetData.ashx?type=jiekuanshenqinglist";
                 $.post(url, para, function (res) {
                   that.hideRefresh();
                     if (res.IsSuccess) { 
                        addDataToTop(res.Msg)
                        myScroller.scrollToTop();


                     } else {
                         $("#afui").popup(res.Msg);
                     }                  
                 }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败!"); });              
                 pageindex++;
         });


         var hideClose;
         $.bind(myScroller, "refresh-release", function () {
          //  console.log("refresh-release");            
             return false; //tells it to not auto-cancel the refresh
         });


         $.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 () {
          console.log("infinite-scroll");
            if(!isfinishread)
            {
              return ;
            }
            isfinishread=false;
             var self = this;           
             $(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();
                 var para = {
                     pageindex: pageindex,                  
                 };
                 var url = serviceUrl + "UIPhoneAjax/GetData.ashx?type=jiekuanshenqinglist";
                 $.post(url, para, function (res) {
                     if (res.IsSuccess) {
                         $(self.el).find("#infinite").remove();
                          self.clearInfinite();
                          addDataToBottom(res.Msg);                        
                          self.scrollToBottom();
                     } else {
                         $("#afui").popup(res.Msg);
                     }
                     isfinishread=true;
                 }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败!"); })
                 pageindex++;
             });
         });
         $("#jiekuanshenpi").css("overflow", "auto");
     });



   官网参考

其他几个事件官方说明





使用jqMobi开发app基础:Scrolling的使用,向上向下拖动,动态添加数据

上一篇:Python--一个文件被重复import的问题?


下一篇:netty系列之:在netty中使用protobuf协议