Swipeleft 或 Swiperight 不改变页面答案

【问题标题】：Swipeleft or Swiperight not changing pageSwipeleft 或 Swiperight 不改变页面
【发布时间】：2014-10-02 17:29:56
【问题描述】：

我在尝试在 Appery.io 应用上滑动时更改页面时遇到了这个问题。滑动手势有效，但页面没有改变，使用 $(this).next('[data-role="page"] 总是给我一个 0 的长度。

这是页面的组成：

下面是使用$(this).next('[data-role="page"] 时控制台的外观：

这是我目前正在测试的代码：

$('.ui-mobile').on("swipeleft",'[data-role="page"]', function () {
    console.log('swipe next page');
    var next = $(this).next('[data-role="page"]');
    console.log(next);
    if (next.length > 0) {
        $.mobile.changePage(next, "slide", false, true);
    }
});

所以回顾一下。滑动有效，因为控制台记录了它。当我看到'nextsibling'是客场演出时，'previoussibling'也是如此，我不确定这是否是正确的属性。

我环顾四周，看到一些类似的帖子，每个帖子都有勾号，但无论我查看和测试哪个帖子，结果都是一样的。长度始终为 0。

任何想法我做错了什么？

提前致谢。

添加

【问题讨论】：

我不同意这是重复的，在移动 jQuery 1.5 发布时，'activePage' 将被删除。所以使用你的解决方案只是暂时的？请改变你的看法。
@Omar，请删除重复的标签。这不是重复的，您的回答不能解决我的问题！我已经等了一个小时，不理我是行不通的。
您没有提及您使用的是哪个版本。

标签： javascript jquery jquery-mobile swipe

【解决方案1】：

将滑动事件绑定到文档，然后检查活动页面是否在.prev()或.after()之前有一个页面。

$(document).on('swipeleft swiperight', function (event) {
    if (event.type == 'swipeleft') {
        var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
            nextPage = activePage.next('[data-role=page]');
        if (nextPage) {
            $.mobile.pageContainer.pagecontainer("change", nextPage, {
                transition: "flip"
            });
        }
    }
    if (event.type == 'swiperight') {
        var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
            prevPage = activePage.prev('[data-role=page]');
        if (prevPage) {
            $.mobile.pageContainer.pagecontainer("change", prevPage, {
                transition: "flip",
                reverse: true
            });
        }
    }
});

Demo

【讨论】：

这不起作用。我正在使用带有模板的 Appery.io。更改文档不是我想要更改的内容，而是活动 div。也许我正在尝试错误的方法来做到这一点。但我应该添加类以使其处于活动状态。滑动有效，但我的也有效，但是您示例中的页面显示的是一个空页面，带有模板或任何内容？
@AndrewWalker 在上面的代码中，它更改了页面 div 而不是文档。您要更改页面 (HTML) 或页面 (div)？
我试图更改文档，因为它看起来好像，即使使用模板，整个页面也会加载新的，即使它是一个模板。所以看起来模板重新加载了新的活动 div（或页面）。但是通过重新加载文档而不是 div，您将获得相同的页面。什么都没有改变。在您的示例中，文档更改为空白页。
@AndrewWalker 所以你正在尝试加载一个新的 HTML 页面，对吗？
我认为这就是它想要做的。我需要进一步调查。对我来说，它看起来需要重新加载整个页面并添加一个新的 div，其中的内容来自另一个文件

【解决方案2】：

在 Omar 的帮助下，我设法解决了这个问题。

因为changePage 和activePage 是

自 jQuery Mobile 1.4.0 起已弃用，并将在 1.5.0 中删除。

我需要一个可以持续使用的版本，因此我设法使用以下代码对其进行了修复：

$(document).on('swipeleft swiperight', function (event) {

    //Check current page id
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
    //Get div (page) id
    activePage = activePage.attr('id');
    //Get number of page ie page1, page2, page3 page4 etc
    var activePageNo = activePage.slice(4);
    //Get current full URL
    var activeURL = $(location).attr('href');
    //Remove div (page) ref from url
    activeURL = activeURL.substr(0,activeURL.indexOf("#"));


    //Set up new numbers for next and prev swipes
    var np = parseInt(activePageNo)+1;
    var pp = parseInt(activePageNo)-1;
    //Set full div (page) ids 
    var prevPage = '';
    var nextPage =  'page' + np;
    if(activePageNo > 0) {
        prevPage = 'page' + pp;
    } else {
        prevPage = 'page0';
    }

    if (event.type == 'swipeleft') {
       if (nextPage) {
           $.mobile.pageContainer.pagecontainer("change", activeURL + '#' + nextPage, {
               transition: "slide"
           });
       }
    }

    if (event.type == 'swiperight') {
        if (prevPage) {
            $.mobile.pageContainer.pagecontainer("change", activeURL + '#' + prevPage, {
                transition: "slide",
                reverse: true
            });
        }
    }
});

希望这有助于其他希望从旧 1.4 进行更改并为新 1.5 做好准备的人:)

【讨论】：