appframework基础 : 六、Scrolling使用，上下拖动，动态添加数据。
来源：互联网 发布：oracle软件合同模板 编辑：程序博客网 时间：2024/06/17 11:01
官网上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>然后我删除了，不需要的div，发现，在没有任何内容后，没法拖动了！！看来在拖动之前必须添加一定的内容，然后才能拖动。
我是用的是panel的属性data-load。
基本的代码：
<div id="jiekuanshenpi" class="panel" data-load="loadFirstpage" data-defer="jiekuanshenpi.html" data-tab="navbar_picture"> <span style="white-space:pre"></span><script type="text/javascript"> function loadFirstpage() { <span style="white-space:pre"></span>var url = serviceUrl + "UIPhoneAjax/GetData.ashx?type=jiekuanshenqinglist"; <span style="white-space:pre"></span>$.post(url, null, function (res) { <span style="white-space:pre"></span>if (res.IsSuccess) { <span style="white-space:pre"></span>var obj = $.parseJSON(res.Msg); <span style="white-space:pre"></span>for (var i = 0; i < obj.length; i++) { <span style="white-space:pre"></span>var item = obj[i]; <span style="white-space:pre"></span>($("#jiekuanshenpi")).append("<div>" + item.SUNAME + "预借金额" + item.Fploanmoney + ";标题" + item.RR_TITLE + "申请时间" + item.RR_CREATEDATE + ";借款原因" + item.Floancause + "</div><br/>"); <span style="white-space:pre"></span>} <span style="white-space:pre"></span>} else { <span style="white-space:pre"></span>$("#afui").popup(res.Msg); <span style="white-space:pre"></span>} <span style="white-space:pre"></span>}, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); }) <span style="white-space:pre"></span>}<span style="white-space:pre"></span></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("网络连接失败！"); }) } }官方参考
jqmobi事件参考
0 0
- appframework基础 : 六、Scrolling使用，上下拖动，动态添加数据。
- 使用jqMobi开发app基础：Scrolling的使用，向上向下拖动，动态添加数据
- 使用jqMobi开发app基础：Scrolling的使用，拖动后大量空白的解决方法
- 使用jqMobi开发app基础：Scrolling的使用，停止和继续拖动有关的问题
- appframework基础 : 五、a标签的使用
- appframework基础 : a标签的使用
- appframework基础 : 一、介绍
- extjs的tree的使用（拖动、动态载入json数据、拖动后的事件处理）
- extjs的tree的使用（拖动、动态载入json数据、拖动后的事件处理）
- appframework基础 : 二、定义header
- appframework基础 : 四、panel 属性
- 在iOS中使用Phonegap防止Webview被上下拖动
- jquery 上下拖动div
- 禁止scrollview上下拖动
- C#窗体操作数据库时使用按钮动态衔接上下一条的数据
- PopupWindow使用,添加简单上下动画
- appframework基础 : 三、页面传值方式
- 视差滚动(PARALLAX SCROLLING)使用
- [AS3]如何绕开AS3安全沙箱进行跨域加载SWF文件
- SqlClr中如何引用更多的dll
- 享元模式
- 第1章 架设服务器前的准备工作
- emacs config
- appframework基础 : 六、Scrolling使用，上下拖动，动态添加数据。
- 关于typedef的用法总结
- printf格式输出数字，位数不够前面补0，适用与输出编号
- 【数据结构与算法】【查找】哈希表的代码实现
- 详细介绍Java内存泄露原因
- 在Fedora18上配置个人的Hadoop开发环境
- Hbase 新api连接java实现
- Item的click事件和Item里的button等子控件的click事件同时生效的解决办法
- 2014年孙坚林芮西喜剧爱情片《缘来是游戏》HD中英双字
