javascript - JQM 删除了我的页面

Question

有一个非常小的例子来演示我的 jquerymobile 问题:

JSFiddle - http://jsfiddle.net/forrest_gump/Q73Mk/3/

正如你所看到的，我调用 jqm changePage() ，它出现了一秒钟，但它突然被 #pageIndex 删除了

我花了很多时间试图找出原因!？!是我傻还是jqm bug？

Answer 1

请注意，当页面准备好显示但仍处于隐藏状态时，pageinit 会触发，因为该页面上仍有一系列事件。更改页面不会阻止这些事件的发生，从而导致目标页面显示一段时间并恢复到上一页。

对此您有两种解决方案:

• 解决方案一:

  使用 setTimeout() 延迟 changePage 以确保触发所有页面事件。

  $(document).on('pagecreate', '#pageIndex', function () {
      setTimeout(function () {
          $.mobile.pageContainer.pagecontainer("change", "#pageLogin", {
              transition: "slideup"
          });
      }, 100); /* 100ms or more */
  });
  

  注意: pageinit 已弃用，并替换为 pagecreate。此外，$.mobile.changePage 替换为 $.mobile.pageContainer.pagecontainer("change", "#page", { options });。

  Demo

<小时/>

• 解决方案二:

  监听pagebeforechange事件来决定首先显示哪个页面。

  $(document).on("pagebeforechange", function (e, ui) {
      if (ui.toPage[0].id == "pageIndex" && typeof ui.options.fromPage === "undefined") {
          $.mobile.pageContainer.pagecontainer("change", "#pageLogin", {
              transition: "slideup"
          });
          e.preventDefault();
      }
  });
  

  Demo