使用jqMobi开发app基础：Scrolling的使用，向上向下拖动，动态添加数据
浏览数：25 /
时间：2015年06月11日
官网上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");
});
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
