官网上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)
#
- 前言
- 使用jqMobi开发app基础
- jqMobi开发app页面注意事项
- 使用jqMobi开发app基础：定义header
- 使用jqMobi开发app基础：定义footer
- 使用jqMobi开发app基础：通过panel添加内容
- 使用jqMobi开发app基础：panel属性data-defer介绍
- 使用jqMobi开发app基础：Side Menu
- 使用jqMobi开发app基础：Styled Lists布局
- 使用jqMobi开发app基础：Grid布局
- 使用jqMobi开发app基础：响应式布局介绍
- 使用jqMobi开发app基础：Toggle Switches开关按钮
- 使用jqMobi开发app基础：HTML5 LocalStorage 本地存储
- 使用jqMobi开发app基础：登录页面的实现
- 使用jqMobi开发app基础：注销页面的实现
- 使用jqMobi开发app基础：viewport指令
- 使用jqMobi开发app基础：a标签的使用
- 使用jqMobi开发app基础：Scrolling的使用，向上向下拖动，动态添加数据
- 使用jqMobi开发app基础：页面传值方式
- 使用jqMobi开发app基础：panel之间的跳转方式
- 使用jqMobi开发app基础：panel之间的跳转方式总结
- 使用jqMobi开发app基础：下拉select
- 使用jqMobi开发app基础：真的只能存在一个DOM吗？
- 使用jqMobi开发app基础：使用 jQuery
- 使用jqMobi开发app基础：Scrolling的使用，拖动后大量空白的解决方法
- 使用jqMobi开发app基础：Scrolling的使用，停止和继续拖动有关的问题
- 使用jqMobi开发app基础：Badge的使用
- 使用jqMobi开发app基础：如何拨打电话？
- 使用jqMobi开发app基础：弹出内容的设计