在Android应用程序开发人员的html页面之间滑动 [英] Swiping between html pages for Android app dev

问题描述

我知道之前已经有人问过这个问题，但是我无法从他的任何例子中得出结论. 在所有页面都作为单独的html文件的地方，让幻灯片过渡工作似乎很困难?脚本的下一个/上一个部分如何知道下一个是其他文件?

I know this has been asked before but I can't get any of he examples to work. Getting the slide transition to work where you have all the pages as separate html files seems very difficult to do? How does the next/prev part of the script know which of the other files is next?

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

For example, index.html should slide to 01_welcome.html - but how does it know that it's not 02_funds.html?

感谢您能给予的任何启发.下面是我一直在尝试实现的脚本(由先前的回答提供).

Thanks for any enlightenment you can give. Below is the script ( courtesy of a previous answer) I've been trying to implement.

$('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);
    }
});

推荐答案

OP中的代码在多页面模型环境中运行良好，因为所有页面(div)都存在于DOM中.对于单页模型，您需要对代码进行一些调整，因为每个页面都是一个单独的文件.另请注意，不建议使用.live()，请改用.on().

The code in your OP works well in Multi-Page Model environment, since all pages (div's) are present in DOM. For Single Page Model, you will need to tweak the code a bit as each page is an individual file. Another note, .live() is deprecated, use .on() instead.

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

The simplest solution is to add custom attributes to each page div, e.g.

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

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

Retrieve the values of the custom attributes on swipe and then load the target page.

$(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页面之间滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！