Question

我在jQuery Mobile中有一组2个非常基本的页面：

<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        Header 1
    </div>
    <div data-role="content">
        Content 1
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <button>next</button>
    </div>
</div>
<div data-role="page2" id="page">
    <div data-role="header">
        Header 2
    </div>
    <div data-role="content">
        Content 2
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <button>next</button>
    </div>
</div>

按下按钮，我会转换到另一页的页面：

$("#page1 button").on("click", function(){
    $.mobile.changePage($("#page2"), {transition: "slide", reverse: false, changeHash: false});
});
$("#page2 button").on("click", function(){
    $.mobile.changePage($("#page1"), {transition: "slide", reverse: false, changeHash: false});
});

但是当转换正在运行时，页脚跳出位置并几乎移出页面底部的页面。

如何避免这种副作用？

Answer 1

除了你的错字：<div data-role="page2" id="page">，<div data-role="page" id="page2">，我认为你的问题很有趣，因为我相信你想探索JQM 1.4.5的固定外部工具栏的功能：

来自JQM文档Fixed external toolbars：

外部工具栏位于不受其影响的页面之外过渡

这是一个使用外部工具栏导航的简单示例，只有一个页眉，一个页脚和一个导航按钮，其中导航链接和页面标题是动态设置的：

＆＃13;

$(function(){
  $("[data-role='header'], [data-role='footer']").toolbar({
    theme: "a",
    position: "fixed",
    tapToggle: false
   });
});

$(document).on('click', '#btn-next', function () {
  var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
  var pages = {"page2": "#page1", "page1": "#page2"};
  $(":mobile-pagecontainer").pagecontainer("change", pages[pageId], {
    transition: "slide",
    reverse: false,
    changeHash: false
  });
});

$(document).on("pagecontainerchange", function() {
  $("[data-role='header'] h2" ).text($(".ui-page-active").jqmData("title"));
});

＆＃13;

.footer-button-left {
  position: absolute !important;
  margin: 0 !important;
  top: auto !important;
  bottom: 0.24em !important;
  left: 0.4em !important;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div data-role="header">
    <h2>Header</h2>
  </div>
  <div data-role="page" data-title="Header 1" id="page1">
    <div data-role="content">
      Content 1
    </div>
  </div>
  <div data-role="page" data-title="Header 2" id="page2">
    <div data-role="content">
      Content 2
    </div>
  </div>
  <div data-role="footer">
    <h2>Footer</h2>
    <button id="btn-next" class="ui-btn ui-corner-all ui-btn-inline ui-mini footer-button-left">next</button>
  </div>
</body>
</html>

＆＃13;

请注意，标题和文字中的初始文字作为占位符需要页脚，以及页脚内按钮的一些自定义样式。

jquery移动固定页脚在滑动过渡时移动

1 个答案: