Jquery mobile 幻灯片转换时，jquery mobile固定页脚正在移动

我在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>

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

---

我怎样才能避免这种副作用呢？

除了您在这里的输入：

应该是

，我认为您的问题很有趣，因为我相信您希望探索JQM 1.4.5的固定外部工具栏的功能：

从这里的JQM文档：

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

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

$（函数（）{
$（“[data role='header']，[data role='footer']”。工具栏({
主题：“a”，
位置：“固定”，
tapToggle:错误
});
});
$（文档）.on（'click'，'btn next'，函数（）{
var pageId=$（“：mobile pagecontainer”）.pagecontainer（“getActivePage”）.prop（“id”）；
var pages={“page2”：“#page1”，“page1”：“#page2”}；
$（“：mobile pagecontainer”）.pagecontainer（“更改”，页面[pageId]{
过渡：“幻灯片”，
反面：错，
changeHash:false
});
});
$（文档）。在（“pagecontainerchange”，函数（）上{
$（“[data role='header']h2”）.text（$（“.ui页面处于活动状态”）.jqmData（“标题”）；
});
.footer按钮左侧{
位置：绝对！重要；
边距：0！重要；
顶部：自动！重要；
底部：0.24em！重要；
左：0.4em！重要；
}

标题
内容1
内容2
页脚
下一个

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