滑动动画一次只显示一页答案

【问题标题】：Swipe animation displays only one page at once滑动动画一次只显示一页
【发布时间】：2014-03-25 15:55:10
【问题描述】：

当使用滑动滑动页面时，例如

// 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" });

我得到了这样的效果：向右滑动时，当前页面立即消失，上一页从左侧滑入。向左滑动时，当前页面向左滑出，然后立即显示下一页。

我想要的是旧页面滑出，新页面同时滑入，就像在 Omar 的示例中一样：http://jsfiddle.net/Palestinian/L297j/

我尝试了 $.mobile.changePage 而不是较新的 $("body").pagecontainer("change") 但这没有区别。我确保幻灯片目标页面确实存在于幻灯片之前（页面是动态创建的），并且在设置滑动之前我还添加了另一个对页面构造函数的调用。

“翻转”过渡在同一个地方看起来非常好，可能是因为从来没有两个页面同时可见？我不知道，我希望有人知道更多的“幻灯片”陷阱。

【问题讨论】：

你的意思是你想看到两个页面都像这个图像滑块一样滑动。 --- jssor.com
确保在更改页面之前添加新页面。请更多相关代码。
你需要一个pagebeforechange事件--- jQuery( ".selector" ).on( "pagebeforechange", function( event ) { ... } )
@Tasos：是的，这就是我想要的滑动方式。关于“pagebeforechange”我应该在这个事件中做什么？ swipe 事件已经绑定，此时页面已经渲染完毕。
能否请您发布更多关于如何动态注入页面和绑定滑动事件的代码？

标签： jquery-mobile

【解决方案1】：

抱歉，重新创建问题花了一段时间，小提琴变得相当冗长：

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"

从标题。您可以在小提琴中尝试一下，幻灯片会正常工作。

【讨论】：