滑動動畫一次僅顯示一個頁面

當使用滑動滑動頁面時，例如，滑動動畫一次僅顯示一個頁面

// swipe right event (currentpage is pseudo code) 
$("body").pagecontainer("change", "#page" + currentpage - 1, { transition: "slide", reverse: true }); 


// swipe left event 
$("body").pagecontainer("change", "#page" + currentpage + 1, { transition: "slide" });

我得到這種效果：在向右滑動時，當前頁面立即消失，上一頁從左側滑入。在左側滑動時，當前頁面向左滑動，然後立即出現下一頁。

我要的是舊頁面滑出和新的一頁幻燈片同時，像奧馬爾的例子：http://jsfiddle.net/Palestinian/L297j/

我試過$ .mobile.changePage，而不是新的$（「身體」）。 pagecontainer（「更改」），但沒有區別。我確信滑動目標頁面確實存在於幻燈片之前（頁面是動態創建的），並且在設置滑動之前，我還添加了對頁面構造函數的另一個調用。

「翻轉」轉換在同一個地方看起來非常好，可能是因爲同時沒有兩個頁面可見？我不知道，我希望有人知道更多的「幻燈片」陷阱。

來源

2014-03-25 TvdH

你的意思是你想看到這兩個頁面都像這個圖像滑塊一樣滑動。 --- http://www.jssor.com/ – Tasos

確保您在_changing_頁面之前添加新頁面。請更多相關的代碼。 – Omar

你需要一個pagebeforechange事件--- jQuery（「.selector」）.on（「pagebeforechange」，function（event）{...}） – Tasos

對不起它花了一段時間來重現問題和提琴變得相當冗長：

http://jsfiddle.net/timvdh/eFDLr/7/

我在這個例子中使用靜態面板：

<div data-role="panel" id="select-panel" data-position="left" data-display="overlay" data-theme="a" data-bind="jQM: true"> 
    <div data-role="header" class="ui-header ui-bar-inherit"> 
     <h1 class="ui-title" role="heading" aria-level="1">Optionen</h1> 
     <a href="#" data-rel="close" class="ui-btn ui-btn-right ui-btn-icon-right ui-icon-arrow-l ui-btn-shadow ui-btn-corner-all ui-btn-icon-notext"></a> 
    </div> 
</div>

的

data-bind="jQM: true"

綁定本質上執行

$("#select-panel").trigger("create");

這是必須完成的，因爲靜態面板（可用於每個頁面的頁面之外的面板）不會被jQM增強。

但是，在這個特殊情況下，一切似乎都很好，但幻燈片變得如問題中所述的醜陋。

的簡單的解決方法是從首部刪除

data-role="header"

。您可以在小提琴中嘗試它，幻燈片將正常工作。

來源

2014-03-27 15:48:14 TvdH

滑動動畫一次僅顯示一個頁面

回答

相關問題