[英]jQuery mobile and iscroll refresh
我對iscroll有一個小問題。 我正在為帶有phonegap和jquery mobile的iphone構建一個小型應用程序,使用從json獲取的外部數據,使用iscroll和data-iscroll =“”,當我加載列表視圖的內容時,iscroll效果很好,但是如果退出並返回另一篇文章,iscroll記住位置,我希望可以從頁面頂部開始。
這是我的例子http://www.viaggiosullaluna.it/es.zip
尋求幫助。
iScroll4具有.refresh()
方法。
考慮到您使用這樣的東西來創建iscroll實例:
var myScroll = new iScroll('idOfElement', {/*options*/});
在調用新文章的函數末尾(以及在更改滾動內容的每個函數上)添加以下內容:
setTimeout(function () {
myScroll.refresh();
}, 100);
這樣,它將重新計算可滾動區域的高度並重做滾動。 有關更多信息,請參見http://cubiq.org/iscroll-4上的 MASTERING THE REFRESH() METHOD
。
更新資料
要滾動回到頂部,請使用以下命令:
myScroll.scrollTo(0, 0);
doc狀態為scrollTo(x, y, time, relative)
。 time
以毫秒為單位)(用於滾動的“動畫”,這可能是您不想要的),而relative
用於基於當前元素的滾動(您也不想這樣做)。
有關更多信息,請參見http://cubiq.org/iscroll-4上的 JAVASCRIPT SCROLLING
對不起,我不是很了解。 不幸的是,這並不是js的王牌。 我應該了解如何在我的代碼中插入函數myScroll.scrollTo(0,0)。 你真的很樂意幫助我。 我使用以下三個功能:
JAVASCRIPT
$("#malattie_page").live("pageinit", function() {
});
$("#malattie_interno_page").live("pageinit", function() {
});
$("#malattie_page").live("pagebeforeshow", function(event,data) {
$.ajax({
url: "http://www.viaggiosullaluna.it/ipediatria_admin/json/malattie.php",
type: 'post',
dataType: 'json',
crossDomain : true,
async:false,
success: function(retval, textStatus){
var html = "<ul id='lista_malattie' data-role='listview' data-autodividers='true' data-filter='true' data-filter-placeholder='Search...'>";
for (var i=0; i<retval.length; i++) {
html += "<li><a href='#malattie_interno_page' data-transition='slide' class='contentLink' data-entryid='"+retval[i]['id']+"' >"+retval[i] ['title']+"</a></li>";
}
html += "</ul>";
$("#interno_malattie").html(html);
$("#lista_malattie").listview();
}
});
});
$("#malattie_interno_page").live("pagebeforeshow", function(event,data) {
$.ajax({
url: "http://www.viaggiosullaluna.it/ipediatria_admin /json/malattie.php?id="+selectedEntry,
type: 'post',
dataType: 'json',
crossDomain : true,
async:false,
success: function(retval, textStatus){
var html =""
for (var i=0; i<retval.length; i++) {
if(selectedEntry == retval[i]['id']) {
html += "<h3>"+retval[i]['title']+"</h3>";
html += "<div class='interno'>"+retval[i]['content']+" </div>";
}
}
$("#interno_malattie_page").html(html);
}
});
});
$("#malattie_page").live("pageshow", function(prepage) {
});
$("#malattie_interno_page").live("pageshow", function(prepage) {
setTimeout(function(){$('#malattie_interno_page [data- role="content"]').iscrollview('refresh');}, 0);
});
和HTML
<!-- PAGE MALATTIE -->
<div data-role="page" class="ui-responsive-panel" id="malattie_page">
<div data-role="header" data-theme="f" data-position="fixed">
<h1>MALATTIE</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a></div><!-- /header -->
<div data-role="content" data-iscroll="">
<div id="interno_malattie">
</div>
</div><!-- /content -->
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-panel" data-theme="a">
<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
<li data-icon="delete" class="close-button"><a href="#" data-rel="close">MENU INTERNO</a></li>
<li><a href="#malattie_page" data-transition="fade">PAGE</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
<!-- PAGE MALATTIE INTERNO PAGINA -->
<div data-role="page" class="ui-responsive-panel" id="malattie_interno_page">
<div data-role="header" data-theme="f" data-position="fixed">
<h1>MALATTIE</h1>
<a href="#malattie_page" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
</div><!-- /header -->
<div data-role="content" data-iscroll="">
<div id="interno_malattie_page">
</div>
</div><!-- /content -->
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-panel" data-theme="a">
<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
<li data-icon="delete" class="close-button"><a href="#" data-rel="close">MENU INTERNO</a></li>
<li><a href="#malattie_page" data-transition="fade">PAGE</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
如果您使用iscrollview意味着只需嘗試一下...
1.刷新
$('#videotagisc').iscrollview("refresh");
2.滾動到
$('#videotagisc').iscrollview('scrollTo', 0,0);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.