Hammer JS和History相关问题

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，这样当用户滑动时就会更新历史记录，并通过检查当前哈希值是否与新哈希值匹配来防止反复调用，以免在历史记录中产生重复条目。

- Cameron

---

你的问题似乎与“next”、“prev”函数有关。它们返回索引+/-1。因此，当用户向右滑动时，使用section-index+1，这等于不存在的页面，并导致页面重新加载，pageindex=0。当用户点击后退时，他们被发送到不存在的页面，然后循环回来。我建议您更新您的next/prev逻辑，以确保它不引用这些不存在的页面。例如，第1节，第2页，右侧链接到第2节，第0页等。 - Kami

你能展示一个例子吗？或者快速写一个代码片段？ - Cameron

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。从根本上阻止了用户向后导航。

我建议您更新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/ （忽略奇怪的用户界面 - 它是您代码的糟糕副本）

- Kami