JQuery 移动幻灯片过渡可以反向但不能向前

Question

我正在使用 'multi-page' 范式构建网络应用程序，尝试使用 "slide" 转换在同一页面上的 DIV 之间进行转换。

我有两个功能是通过滑动或键盘触发的 left/right:

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

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

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

编辑：经过反复试验，我能够通过删除 header 来消除问题。我觉得我没有正确使用外部 headers。

这是我的 header 代码：

<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" 添加到我的 header 解决了问题。谢谢@ezanker。

JQuery 移动幻灯片过渡可以反向但不能向前

JQuery Mobile slide transition works in reverse but not forward

javascript

css

jquery-mobile