我有一个使用数据iscroll的事件链接列表。每个事件也是一个列表(标题/日期位置/描述)。
每次单击事件列表时,都会显示该事件。如果我向下滚动内容,当我返回到事件列表,然后单击另一个事件时,视图会滚动到上一个视图停止的位置。
我已经成功地阻止了这种情况,方法是在事件内容上启动empty(),然后在事件内容的后退按钮上调用updatelayout:
$("#bhome").on('vclick', function(e) {
$('#econt').empty().trigger('updatelayout');
$.mobile.loading('show');
e.preventDefault();
$.mobile.changePage("#page1");
});
但是,当然,安卓用户不会使用后退按钮,而是使用后退键。
我试图在事件发生之前清空()并更新页面上的布局,但很明显,位置在该事件发生之前就被保存了:
$('#event').on('pagebeforehide', function(event, data) {
$('#econt').empty();
$('#econt').trigger('updatelayout');
$('#escroll').trigger('updatelayout');
});
我也尝试过使用silentscroll功能,但它也不起作用:
$(document).on('pageshow', '#event', function(){
$.mobile.silentScroll(0);
});
我如何确保在观看新活动时,位置回到顶部?
这是我的index.html文件的一个片段:
<div id='container'>
<div data-role='page' id='page1' data-theme="c" style="background: black;">
</div>
<div data-iscroll style='background-color:#ddd;'>
<ul id="el"></ul>
</div>
<div data-role='footer' data-position='fixed' data-theme="a" data-tap-toggle="false">
</div>
</div>
<div data-role="page" id="event" data-theme="c" style="background:black;">
<div data-role='header' data-position='fixed' data-theme="a" style="height:42px;">
<a id="bhome" class="ui-btn-left ret" data-icon="arrow-l" href="#" data-iconshadow="false">Back</a>
<h1 id='eh1'></h1>
</div>
<!-- data-role='content' entraine un scroll horizontal -->
<div data-iscroll style='background-color:white;' id='escroll'>
<ul id='econt'></ul>
</div>
</div>
iscrollview的作者给出了答案(效果很好):
$("#escroll").iscrollview("scrollTo", 0, 0, 0, false);