Question

我正在使用“多页”范例构建一个Web应用程序，尝试使用“幻灯片”转换在同一页面上的DIV之间进行转换。

我有左右两次滑动或键盘触发的两个功能：

function navnext(next) {
  console.log('(next) navigating to ' + next);
  $( ":mobile-pagecontainer" ).pagecontainer( "change", "#" + next, {
    transition: "slide",
    allowSamePageTransition: true
  });
}

function navprev(prev) {
  console.log('(prev) navigating to ' + prev);
  $( ":mobile-pagecontainer" ).pagecontainer( "change", "#" + prev, {
    transition: "slide",
    reverse: true,
    allowSamePageTransition: true
  });
}

反向过渡正常。当前一页从左侧滑入时，当前活动页面向右滑动。

使用向前转换，当前活动页面滑出，但空白页面会滑入。一旦白页滑入，内容就会闪烁。我不确定我做错了什么或者是什么导致这种情况只发生在一个方向上。

编辑：玩完之后，我可以通过删除标题来解决问题。我觉得我没有正确使用外部标题。

这是我的标题代码：

<div data-role="header" data-tap-toggle="false" data-theme="d">
  <div class="icon-up-arrow">
    <img src="/static/img/up-arrow-white.png">
  </div>
  <h1 id="header_text" class="smallcaps"></h1>
</div>

以下JS在<body>标记的末尾运行：

$( "[data-role='header']" ).toolbar({ theme: "d" });
$( "[data-role='footer']" ).toolbar({ theme: "d" });

Answer 1

在我的标题中添加data-position="fixed"解决了这个问题。谢谢@ezanker。

JQuery Mobile幻灯片转换工作正反向但不转发

1 个答案: