使用jQuery Mobile 1.3列表视图保存滚动位置

Question

我对此进行了相当多的研究,但未能找到解决方案.我正在使用jquery mobile 1.3

我有一个从数据库填充的动态嵌套列表视图,因为用户正在浏览列表视图 - 用户向下滚动,单击返回时,用户不会返回到最后一个位置,它会显示在屏幕顶部.

当用户浏览嵌套列表视图并保存时,我有什么方法可以获得滚动位置,所以当用户点击时我可以使用它可以调用$ .mobile.silentScroll.

请指教,

谢谢,

短剑的一种

Answer 1

解

这是一个有效的例子:http://jsfiddle.net/Gajotres/5zZzz/

// Detect click on a li element and store its coordinate, change page to another
$(document).on('pagebeforeshow', '#index', function(){  
    $('#test-list li').on('click', function(){   
        storePosition.topCoordinate =  $(this).offset().top;
        $.mobile.changePage('#second');
    });    
});

// If there's a stored position use silentscroll function and scroll to correct location
$(document).on('pageshow', '#index', function(){      
    if(storePosition.topCoordinate !== null) {
        $.mobile.silentScroll(storePosition.topCoordinate);
    }
});

// Store position location
var storePosition = {
    topCoordinate : null
}

介绍

在我描述您需要了解的其他解决方案之前,这不是错误,也不是一个完美的解决方案.问题是,为了设置转换到另一个页面的动画,视口必须位于页面的顶部,以便当前页面和转换的页面垂直排列.

如果你在一个页面上的长列表中间(比如说1000px)并且你要转移到的页面只有几百个像素高,那么当前页面将在屏幕上正确显示动画,但新页面将不会显示为它将在视口上方.

有两个真正可行的解决方案:

1. iScroll及其jQuery Mobile派生iScrollview

iScroll主页:http://cubiq.org/iscroll-4

iScrollview主页:https://github.com/watusi/jquery-mobile-iscrollview

iScroll是一个javascript,可以在Web浏览器中的窗口中滚动内容,其行为与iPhone和Android等移动设备上的原生滚动非常相似.这意味着您可以使用类似本机的滚动条和物理滚动浏览器中的窗口.

这也是我们当前问题的解决方案.由于iScroll实现页面将占据页面高度的100%,无论列表视图滚动多远.这也是返回列表视图仍然保持在同一位置的原因.

当然,如果您想要实现此解决方案,您应该选择iScrollview实现.你仍然可以实现iScroll,但它会花费你更多的时间.

2.无声滚动

就像我的顶级例子:

官方文档:http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

这个jQuery Mobile功能也是我们首先遇到这个问题的原因.在触发页面转换之前,原始页面将以静默方式滚动到顶部.

在我们的例子中,当选择listview时,必须记住它的位置(在这里你会发现在页面转换期间存储数据/参数的解决方案,只是在页面改变之前搜索章节:页面转换之间的数据/参数操作).在这种情况下,当我们返回上一页时,我们可以使用pagebefpreshow事件在显示页面之前静默滚动到底部.

//scroll to Y 100px
$.mobile.silentScroll(100);

这是一个静音滚动的工作示例:http://jsfiddle.net/Gajotres/2xfrM/

更多信息

如果您想了解有关此主题的更多信息,请查看本文,您还可以找到有用的示例.