Question

我知道以前曾经问过这个问题，但我无法让他的任何一个例子得以运作。让幻灯片转换工作，您将所有页面作为单独的html文件似乎很难做到？脚本的下一个/上一部分如何知道下一个文件是哪个？

例如，index.html应该滑到01_welcome.html - 但它怎么知道它不是02_funds.html？

感谢您提供的任何启示。以下是我一直试图实施的脚本（前面的回答）。

$('div.ui-page').live("swipeleft", function () {
    var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide", false, true);
    }
});
$('div.ui-page').live("swiperight", function () {
    var prevpage = $(this).prev('div[data-role="page"]');
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {
            transition: "slide",
            reverse: true
        }, true, true);
    }
});

Answer 1

OP中的代码在多页模型环境中运行良好，因为所有页面（div）都存在于DOM中。对于单页模型，您需要稍微调整一下代码，因为每个页面都是单个文件。另请注意，.live()已弃用，请改用.on()。

最简单的解决方案是为每个页面div添加自定义属性，例如

<div data-role="page" data-next-page="services" data-prev-page="about">

在swipe上检索自定义属性的值，然后加载目标页面。

$(document).on("swipeleft swiperight", function (event) {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
        nextPage = activePage.data("next-page"),
        prevPage = activePage.data("prev-page");

    /* move to next page */
    if (event.type == "swipeleft" && nextPage) {
        $.mobile.pageContainer.pagecontainer("change", nextPage + ".html");
    }

    /* move to previous page */
    if (event.type == "swiperight" && prevPage) {
        $.mobile.pageContainer.pagecontainer("change", prevPage + ".html", {
            reverse: true
        });
    }
});

在Android应用程序开发的html页面之间滑动

1 个答案: