使用jQuery mobile,我使用列表视图,其中包含前一个和下一个链接以进行分页.一切正常,但我不希望将prev和next页面添加到历史堆栈中.这个想法是回击将只到实际的前一页.
我发现这样做的唯一方法是将data-rel =“dialog”添加到a标签中,但我不希望它是一个弹出对话框.
否则我试着添加
$.mobile.nonHistorySelectors="dialog,pagination"
到mobileinit事件,将属性data-rel =“pagination”添加到a标签.但是这只会在单击链接时抛出错误(即使没有将nonHistorySelectors添加到mobileinit事件,也会发生错误).
编辑：
我发现的最接近的是这个JS
<script type="text/javascript">
$(".page-prev").click(function(e) {
e.stopPropagation();
e.preventDefault();
$.mobile.changePage(this.href,{changeHash:false,reverse:true});
});
$(".page-next").click(function(e) {
e.stopPropagation();
e.preventDefault();
$.mobile.changePage(this.href,{changeHash:false});
});
</script>
和这个HTML
<a href="/blog?page=1" class="page-prev" data-role="button" data-icon="arrow-l">Prev</a> <a href="/blog?page=3" class="page-next" data-role="button" data-icon="arrow-r">Next</a>
这似乎很好地保持浏览器历史记录不被更新,但有时当点击下一页时,滑动的页面会做一些时髦的事情,例如加载/滑动两次.此外,它没有做到的一件事是,如果我从这里导航到一个页面并返回,它将在第1页返回.
解决方法
这样做应该没问题：
// Fix for back buttons
$(document).on('vclick','[data-rel=back]',function(e) {
e.stopImmediatePropagation();
e.preventDefault();
// $.mobile.back(e);
var back = $.mobile.activePage.prev('[data-role=page]');
$.mobile.changePage(back,{
transition: 'slide',reverse: true,changeHash: false
});
});
