jquery 手机后退按钮不显示在第一页

Question

我有一个用以下语言编写的应用程序：

jquery 1.11.1 jquery 手机 1.4.5 科尔多瓦 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 移动设备准备好显示后退按钮之前显示第一页？

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>

有了这个你可以在任何你想要的地方有一个后退按钮，唯一的问题是你必须放一个特定的页面，你可以删除数据-add-back-btn="true"

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

jquery 手机后退按钮不显示在第一页

jquery mobile back button does not display on first page

jquery

jquery-mobile

cordova

HTML

JavaScript