Swipeleft或Swiperight不更改页面

Question

我遇到此问题，尝试在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.

任何想法我做错了什么？

提前致谢。

阿迪

Answer 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

Answer 2

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

因为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：）