javascript - Hammer JS 和历史

Question

我构建了以下演示应用程序，允许用户使用触摸手势左右移动各部分以及上下移动页面:http://preview.na-software.co.uk/Demo/FutureLearning2/

它使用 Hammer JS 的手势和 hashchange 插件来跟踪用户的历史记录，以便他们可以轻松返回到同一位置并使用浏览器按钮在历史记录中来回导航。

从页面导航到没有相应页面的部分时会出现问题，因为我总是希望它默认为零(即使它们是该部分中的匹配页面) 从一个部分移动到另一个部分。

因此，如果您开始于:http://preview.na-software.co.uk/Demo/FutureLearning2/#/section-1/page-1然后尝试访问其他部分之一向左或向右滑动，您将看到它返回到该部分的第 0 页。 但是这会导致两次调用 hashchange，这意味着您无法使用浏览器后退按钮返回，而是卡在该部分和页面上...

关于如何阻止这种情况发生的任何想法？

hashchange 监听器如下所示:

$(window).hashchange( function(){

    var nums = location.href.match(/(section|page)-\d+/g).map(
        function(x){ return +x.replace(/\D/g,"") }
    );

    currentSection = nums[0];

    currentPage = nums[1];

    if( $('.section[data-section=section-'+currentSection+']').find('.page[data-page=page-'+currentPage+']').length < 1) {

        currentPage = 0;
    }

    loadPage(currentSection, currentPage);

    hCarousel.showPane(currentSection, true);

    vCarousel.showPane(currentPage, true);

});

hashchange 通过将当前页面和部分传递给每个实例中的 showPane 方法，确保两个轮播知道发生了什么变化。

if 语句用于检查页面在该部分中是否有效(存在)，如果无效则默认为 0。

在轮播方法中，我也调用 hashchange 因此当用户滑动时它会更新历史记录并且这应该通过检查当前哈希是否与新散列，因此它不会复制它并在历史记录中进行两次输入。

Answer 1

正如我之前的评论中所解释的，问题源于用于确定要显示的下一页和上一页的索引。

目前情况

this.next = function() { return this.showPane(current_pane+1, true); };
this.prev = function() { return this.showPane(current_pane-1, true); };

这只是增加/减少索引并重新加载页面。因此，当用户在页面 section-1/page-2 上并向左/向右导航时，他们将被发送到 section-0/page-2 或 section-2/page-2。加载页面后，HashChange 处理程序确定页面不存在并将页面索引重置为零，加载 section-0/page-0 或 section- 2/页-0。结果(正如您已经确定的那样)有一个额外的历史条目。

您描述的问题的发生是因为这个冗余的历史条目。当用户使用浏览器的后退按钮时 - 它会将它们返回到 section-0/page-2 或 section-2/page-2 - 它们不存在并且 HashChange 函数将它们重定向到 page-0。有效防止用户向后导航。

我建议您更新hCarousel 的prev/next 函数来检查指定的页面是否存在，如果存在则重置计数器才不是。这是 HashChange 中代码的重复，但它会更早触发，从而防止错误加载。

this.next = function() {
 if( $('.section[data-section=section-'+(currentSection+1)+']').find('.page[data-page=page-'+currentPage+']').length < 1) {
   currentPage = 0;
 }
 return this.showPane(current_pane+1, true);
};

this.prev = function() {
 if( $('.section[data-section=section-'+(currentSection-1)+']').find('.page[data-page=page-'+currentPage+']').length < 1) {
   currentPage = 0;
 }
 return this.showPane(current_pane-1, true);
};

结果页面将从section-1/page-2跳转到section-0/page-0或section-2/page- 0 没有中间步骤。

JsFiddle 位于 - http://jsfiddle.net/2nV9m/
(忽略古怪的用户界面 - 它是您代码的错误副本)