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

【问题标题】：jquery mobile fixed footer is moving while slide-transitionjquery mobile固定页脚在滑动过渡时移动
【发布时间】：2017-03-19 18:24:30
【问题描述】：

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

但在过渡运行时，页脚跳出位置，几乎移出页面底部的页面。

如何避免这种副作用？

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

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

来自 JQM 文档Fixed external toolbars：

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

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

$(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"));
});

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

<!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>

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

【讨论】：