官网上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"); });