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/page-0。结果（正如您已经确定的那样）还有一个额外的历史记录条目。

您描述的问题是由于此冗余历史记录条目而发生的。当用户使用浏览器的后退按钮时 - 它会将其返回到section-0/page-2或section-2/page-2 - 它们不存在，而HashChange功能会将它们重定向到page-0 。有效防止用户向后导航。

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

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。

JsFiddle at - http://jsfiddle.net/2nV9m/
（忽略古怪的ui - 它是你代码的错误副本）

锤子JS和历史

1 个答案: