1. 云图网首页
  2. 技术专区
  3. 移动开发

使用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只是每次都是先上拖动，给最下边添加读取的内容。

  在模拟器上测试发现，动态添加的  <ui class=”list” ></ul>;有问题，但静态的是可以的。

  经过测试发现可以改写方法 $.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"); 
     });

重新改写后的公共代码

function ListCommon(detailItemIdField, detailItemTitleField,ajaxUrl, listPaneId, detailPanelId, listCommonVarName,uilistId) { 
    var pageindex = 1; 
    var isfinishread = true; 
    var myScroller; 
    var postInfo; 
    var DetailattrName = "CurrentDetailId"; 
    var fullAjaxUrl; 
    var currentObj; 
    this.updateData = function () { 
        pageindex = 1; 
        if (!uilistId) {            
            $("#" + listPaneId + " .list").empty(); 
        } 
        else { 
            $("#" + uilistId).empty(); 
        } 
    } 
   this.GetPostInfo = function () { 
       return postInfo; 
   } 
   this.init = function () {       
       postInfo = { 
           pageindex: pageindex, 
           fields: detailItemIdField + "," + detailItemTitleField, 
           pageSize: 5, 
           sortname: detailItemIdField, 
           sortorder: "desc" 
       }; 
       currentObj = this; 
       if (ajaxUrl.indexOf("type=") <= 0) { 
           fullAjaxUrl = serviceUrl + ajaxUrl + "?type=list"; 
       } 
       else { 
           fullAjaxUrl = serviceUrl + ajaxUrl; 
       } 
       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"); 
       }); 
       var hideClose; 
       $.bind(myScroller, "refresh-release", function () { 
           myScroller.scrollToTop(); 
           pageindex = 1; 
           var that = this; 
           postInfo = currentObj.GetPostInfo(); 
           postInfo.pageindex = pageindex; 
           $.post(fullAjaxUrl, postInfo, function (res) { 
               that.hideRefresh(); 
               if (res.IsSuccess) { 
                   $("#" + listPaneId + " .list").empty(); 
                   addDataToBottom(res.Msg); 
                   myScroller.scrollToTop(); 
               } else { 
                 
                   $("#afui").popup(res.Msg); 
               } 
           }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); }); 
           return false; 
       }); 
       $.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(); 
               postInfo = currentObj.GetPostInfo(); 
               postInfo.pageindex = pageindex; 
               $.post(fullAjaxUrl, postInfo, 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("网络连接失败！"); }) 
           }); 
       }); 
       $("#" + listPaneId).css("overflow", "auto"); 
   } 
    this.setDetailId = function (id) { 
        $("#" + detailPanelId).attr(DetailattrName, id); 
    } 
    function CreateNewLine(Msg) { 
        var obj = $.parseJSON(Msg); 
        if (obj.length > 0) { 
            pageindex++; 
        } 
        var text = ""        
        for (var i = 0; i < obj.length; i++) { 
            var item = obj[i]; 
            text += "<li> " + currentObj.CreateALink(item) + "</li>"; 
        } 
        return text; 
    } 
    this.CreateALink= function (item) 
    { 
        if (!item) {return "";} 
        return "<a href=/"#" + detailPanelId + "/"  onclick=/"javascript:" + listCommonVarName + ".setDetailId('" + item[detailItemIdField] + "')/">" + item[detailItemTitleField] + "</a>"; 
    }  
    function addDataToBottom(Msg) { 
        var text = CreateNewLine(Msg); 
        if (!uilistId) { 
            $("#" + listPaneId + " .list").append(text); 
        } 
        else { 
            $("#" + uilistId).append(text); 
         } 
    } 
    this.loadFirstPageData = function () { 
        var IsLongIn = CheckIsLongIn(); 
        //   alert("IsLongIn" + IsLongIn); 
        if (!IsLongIn) { 
            return; 
        } 
        //   alert(length); 
        if (pageindex > 1) { 
            var length = $("#" + listPaneId + " .list").children().length; 
            if (length == 0) { 
                pageindex = 1; 
            } 
            else { 
                return; 
            } 
        } 
        $.ui.showMask("加载数据……"); 
        postInfo = currentObj.GetPostInfo(); 
        postInfo.pageindex = pageindex; 
        $.post(fullAjaxUrl, postInfo, function (res) { 
            if (res.IsSuccess) { 
                addDataToBottom(res.Msg); 
            } else { 
                $("#afui").popup(res.Msg); 
            } 
            $.ui.hideMask(); 
        }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); }) 
    }    
}

   官网参考

其他几个事件官方说明



原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/5269.html

赞 (0)
0
上一篇 2021年7月16日
下一篇 2021年7月16日

相关推荐

发表回复

登录后才能评论