[英]jQuery mobile and iscroll refresh
I have a small problem with iscroll. 我对iscroll有一个小问题。 I'm building a small app for iphone with phonegap and jquery mobile, with external data taken from json, use iscroll and data-iscroll = "", when I load the contents of the list view, iscroll works great, but if I go out and return in another article, iscroll remember the position, and I wish I could do from the top of the page. 我正在为带有phonegap和jquery mobile的iphone构建一个小型应用程序,使用从json获取的外部数据,使用iscroll和data-iscroll =“”,当我加载列表视图的内容时,iscroll效果很好,但是如果退出并返回另一篇文章,iscroll记住位置,我希望可以从页面顶部开始。
Thi is my example http://www.viaggiosullaluna.it/es.zip 这是我的例子http://www.viaggiosullaluna.it/es.zip
Ty for Help. 寻求帮助。
iScroll4 has the .refresh()
method. iScroll4具有.refresh()
方法。
considering you used something like this to create your iscroll instance: 考虑到您使用这样的东西来创建iscroll实例:
var myScroll = new iScroll('idOfElement', {/*options*/});
Add the following at the end of the function which calls the new article (and on every function which changes the scrollable content): 在调用新文章的函数末尾(以及在更改滚动内容的每个函数上)添加以下内容:
setTimeout(function () {
myScroll.refresh();
}, 100);
This way it will recalculate the height of the scrollable area and redo the scroll. 这样,它将重新计算可滚动区域的高度并重做滚动。 For more info, see MASTERING THE REFRESH() METHOD
at http://cubiq.org/iscroll-4 有关更多信息,请参见http://cubiq.org/iscroll-4上的 MASTERING THE REFRESH() METHOD
。
Update 更新资料
To scroll back to top, use the following: 要滚动回到顶部,请使用以下命令:
myScroll.scrollTo(0, 0);
The doc states scrollTo(x, y, time, relative)
. doc状态为scrollTo(x, y, time, relative)
。 time
in ms (for the 'animation' of scrolling, which probably you don't want) and relative
meant for scrolling based on current element (which you don't want also). time
以毫秒为单位)(用于滚动的“动画”,这可能是您不想要的),而relative
用于基于当前元素的滚动(您也不想这样做)。
For more info, see JAVASCRIPT SCROLLING
at http://cubiq.org/iscroll-4 有关更多信息,请参见http://cubiq.org/iscroll-4上的 JAVASCRIPT SCROLLING
I'm sorry, I do not understand very well. 对不起,我不是很了解。 are not an ace with js unfortunately. 不幸的是,这并不是js的王牌。 I should understand how to insert the function myScroll.scrollTo (0, 0) in my code. 我应该了解如何在我的代码中插入函数myScroll.scrollTo(0,0)。 You're really kind to help me. 你真的很乐意帮助我。 I use these three functions: 我使用以下三个功能:
JAVASCRIPT 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);
});
AND HTML 和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 -->
If you using iscrollview means just try this... 如果您使用iscrollview意味着只需尝试一下...
1.refresh 1.刷新
$('#videotagisc').iscrollview("refresh");
2.scrollTo 2.滚动到
$('#videotagisc').iscrollview('scrollTo', 0,0);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.