jQuery移动后退按钮未显示在第一页上

Question

我有一个写有的应用程序：

jQuery 1.11.1 jQuery Mobile 1.4.5 Cordova 4.3.0

我的index.html看起来像

<div data-role="page" id="id1">

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page 1</h1>
  </div>

  <div data-role="content">
  </div>
</div>

<div data-role="page" id="id2">

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page 2</h1>
  </div>

  <div data-role="content">
  </div>
</div>

。 。 。

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page X</h1>
  </div>

  <div data-role="content">
  </div>
</div>

我有onLoad（）和onDeviceReady（）

当我的应用启动时，出现启动画面，然后

<div data-role="page" id="id1">

显示器。 但尽管有data-add-back-btn =“ true”，但它没有后退按钮

什么时候

<div data-role="page" id="id2">

显示它没有后退按钮。

我不明白怎么了。 我是否在jquery mobile准备好显示后退按钮之前显示第一页？

Answer 1

您在首页上不能有返回按钮。

重点是什么？

有一种解决方法，创建第三页，将其称为虚拟页面。 将其清空并使其排成一行。 在pagecontainercreate上（即使您正在使用旧的页面事件，也可以使用pagecreate）以编程方式将页面更改为＃id1。 这样，您甚至都不会注意到虚拟页面，而您现在的第二个页面将有一个后退按钮。

工作示例： http : //jsfiddle.net/4y7mav4a/

HTML

    <div data-role="page" id="hidden">

    </div>

    <div data-role="page" id="id1">

      <div data-role="header"  data-add-back-btn="true" style="height: auto">
          <h1>Page 1</h1>
      </div>

      <div data-role="content">
          <a href="#id2">Go to page 2</a>
      </div>
    </div>

    <div data-role="page" id="id2">

      <div data-role="header" data-add-back-btn="true" style="height: auto">
          <h1>Page 2</h1>
      </div>

      <div data-role="content">
      </div>
    </div>

JavaScript的

$(document).on('pagecreate', '#hidden', function(){ 
    $(":mobile-pagecontainer").pagecontainer("change", "#id1");        
});

Answer 2

<div data-role="page" id="id1">

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page 1</h1>
  </div>

我有一个类似的问题，我通过添加此代码解决了

<a href="#page1" data-icon="arrow-l">Back</a>, 

严厉之后：

<div data-role="header" data-add-back-btn="true" style="height: auto">

像这样：

<div data-role="header" data-add-back-btn="true" style="height: auto">
      <a href="#page1" data-icon="arrow-l">Back</a>
<h1>Page 1</h1>
  </div>

有了这个，您可以在任何地方有一个后退按钮，唯一的问题是您必须放置一个特定的页面，并且可以擦除data-add-back-btn =“ true”

我希望这可以帮助您或其他有此需要的人