3

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

我有一个从数据库填充的动态嵌套列表视图，当用户浏览列表视图时 - 用户向下滚动，单击返回时，用户不会返回到最后一个位置，它会转到屏幕顶部。

当用户浏览嵌套列表视图并保存它时，有什么方法可以获取滚动位置，以便当用户单击返回时我可以使用它可以调用 $.mobile.silentScroll。

请指教，

谢谢，

克里斯

4

5 回答 5

9

解决方案

这是一个工作示例：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
}

介绍

在我描述您需要了解的其他解决方案之前，这不是错误，也没有完美的解决方案。问题是，要动画到另一个页面的过渡，视口必须位于页面顶部，以便当前页面和过渡页面垂直对齐。

如果您在一个页面（例如 1000 像素）上的长列表中途而您要转移到的页面只有几百像素高，那么当前页面将正确地在屏幕上显示动画，但新页面将不会显示为它会在视口上方。

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

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% 的页面高度，不管 listview 滚动多远。这也是返回时 listview 仍将保持在同一位置的原因。

当然，如果你想实现这个解决方案，你应该选择 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/

更多信息

如果您想了解有关此主题的更多信息，请查看本文，您还将找到工作示例。

于 2013-03-12T10:17:56.900 回答
1

Gajotres 有一个很好的答案，我只是使用这种方式（我用 saveScrollTop 类标记了页面，这是必要的）：

$(document).on('pageshow',function(){
    if ($.mobile.activePage.hasClass('saveScrollTop')
        && $.mobile.activePage.data('scroll')){
        $.mobile.silentScroll($.mobile.activePage.data('scroll'));
    } else {
        $.mobile.silentScroll(0);
    }
});

$(document).on('pagebeforechange',function(){
    if ($.mobile.activePage && $.mobile.activePage.hasClass('saveScrollTop')){
        $.mobile.activePage.data('scroll',$(window).scrollTop());
    }
});

不幸的是，jQuery 滚动窗口而不是页面 div 内的内容，这就是问题的根源。它保存最后滚动的位置并将其设置在下一页中。如果您不在新页面上滚动并返回，它可以正常工作。但是如果两个页面都比屏幕大，那就完全一团糟了。

于 2013-03-21T11:08:32.337 回答
0

您可以在 jQuery mobile 中使用.offset()跟踪位置。您可以将值保存到 a 中sessionStorage，当用户返回页面时，从中检索值sessionStorage并执行静默滚动。

保存如下

sessionStorage.pixelFromTop = $("#ordSrcCnt").offset();

用户回来后滚动如下

$.mobile.silentScroll(parseInt(sessionStorage.scrollToOrderRow));

希望这足以让您入门。

于 2013-03-12T10:17:34.977 回答
0

如上所述，对我有用的是：

$(document).on("pageshow","#page",function (event) {
if (Listnumber>0)$.mobile.silentScroll($("#"+listnumber).offset().top-50);
});

我有一个动态生成的列表视图（来自 xml 文件），每个 li-item 都有一个 id。我将 id 放在 var listnumber 中，以便在单击 listview 查看详细信息页面后返回 listview 页面时可以检索它。首次访问 listviewpage 时，listnumer var 为 0，因此不会进行任何滚动。我在偏移后做了-50，所以我滚动到我点击的列表项，因为否则列表项将不可见。hth 因为我花了几个小时才弄明白...

于 2013-08-16T19:26:08.120 回答
0

这是修复它的最佳方法。

把它放在页眉中：

<script>
  $(function() { 
    $.mobile.defaultHomeScroll = 0;
  });
</script>

这样它直到永远不会滚动回顶部。

于 2014-11-10T17:34:42.907 回答