Question

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

// 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而不是更新的$（＆＃34; body＆＃34;）。pagecontainer（＆＃34;更改＆＃34;）但这没有任何区别。我确保幻灯片目标页面确实存在于幻灯片之前（页面是动态创建的），并且在设置滑动之前我还添加了对页面构造函数的另一个调用。

＆＃34;翻转＆＃34;转换在同一个地方看起来很完美，可能是因为同时没有两个页面可见？我不知道，我希望有人知道更多＆＃34; slide＆＃34;陷阱。

Answer 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"

从标题中

。您可以在小提琴中试一试，幻灯片也可以正常使用。

滑动动画一次只显示一页

1 个答案: