? ?官網上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("網絡連接失敗！"); }) ? } ?? } ~~~ ?[官網參考](http://app-framework-software.intel.com/documentation.php#afui/afui_scrolling) [其他幾個事件官方說明](http://app-framework-software.intel.com/documentation.php#afui/afui_events) #