在Android應用程序的開發頁面之間滑動

我知道這已經被問過了，但我不能得到他的任何工作例子。讓幻燈片轉換工作將所有頁面作爲單獨的html文件工作似乎非常困難？腳本的next/prev部分如何知道下一個其他文件是哪一個？在Android應用程序的開發頁面之間滑動

例如，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); 
    } 
});

來源

2014-08-27 Jimbly2

上面的代碼可與_multi頁model_，爲_single頁model_，您可以添加自定義屬性'數據下一=「foo」的'和'數據分組=「酒吧」'。這些自定義屬性包含next/prev頁面文件名。檢索它們的值以更改頁面。 btw使用哪種JQM版本？ – Omar 2014-08-28 05:53:05

謝謝奧馬爾 - 我使用JQM 1.4.3所以我需要編碼每一頁 - 這不是問題，因爲只有6頁。我的JS很窮 - 你能建議那些自定義屬性放在上面的代碼中嗎？還是會完全不同？ – Jimbly2 2014-08-28 06:57:54

在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 
     }); 
    } 
});

來源

2014-08-28 07:11:42 Omar

感謝奧馬爾 - 非常有效：那麼，我們有什麼「服務」，它將是完整的標題，即「services.html」？ – Jimbly2 2014-08-28 07:25:14

@ Jimbly2不客氣。測試它並讓我知道如果您想要應用一些更改。編輯：確切地說，_services.html_是您要移動到的下一個頁面，而_about.html_是之前的一個。 – Omar 2014-08-28 07:27:15

@ Jimbly2可能有完整的文件名'data-next-page =「services.html」'並從代碼中移除'+。「html」'。我猜它看起來更好。 – Omar 2014-08-28 07:35:57

在Android應用程序的開發頁面之間滑動

回答

相關問題