如何修复 jQuery Mobile 的固定页脚？

Posted 2023-03-21

【中文标题】如何修复 jQuery Mobile 的固定页脚？

【英文标题】：How to fix jQuery Mobile's fixed footer?

【发布时间】：2011-05-21 14:17:04

【问题描述】：

使用 jQueryMobile，我在标记中包含了data-role="footer" data-position="fixed"，但仍然存在两个错误：

页脚在空点击事件上切换。 页脚不固定，并且隐藏了一些页面内容。

我正在使用 iPhone 3g 进行测试。有什么想法吗？

提前致谢。

UPDATE：貌似点击事件修改了当前页面的页脚，将ui-fixed-overlay改为ui-fixed-inline，当然是display:none的样式，防止其他页面的页脚出现。

如何防止这种修改？

【问题讨论】：

取得了一些进展：找到了症状。关于治愈的任何想法？

嗨，您有没有找到解决页脚重绘问题的方法？我正在尝试在 jQuery Mobile rc1 版本中解决同样的问题。

【参考方案1】：

如果使用1.1 或更高版本，请将data-tap-toggle="false" 添加到您的页眉和页脚，如documented here。

如果您使用的是 jQuery Mobile 1.1 之前的版本，请在加载 jQuery Mobile 之前放置以下内容：

$(document).bind("mobileinit", function()
  $.mobile.touchOverflowEnabled = true;
); // remove

【讨论】：

谢谢。这是 2011 年 5 月发布的；猜想同时事情发生了变化。

你能链接到描述它的文档吗？它似乎不起作用（栏仍然消失并重新出现）。此外，对于其他看到此 SO 帖子的人来说，可能会有更多有趣的信息。

截至今天，当我检查 touchOverflowEnabled 不再受支持。您可以使用上面的文档链接查看官方说明。

【参考方案2】：

这在 jQueryMobile 1.1 rc1 中已修复。见here。

在页脚使用 data-tap-toggle="false"。

【参考方案3】：

使用 jquery.mobile-1.0a4 将 data-position="fixed" 添加到页脚部分在 Iphone、android 和 Chrome 中可以正常工作

【讨论】：

按需要工作？...页眉和页脚在滚动时消失（有时）然后赶上并淡入。似乎没有办法（当然除了黑客之外）创建一个 iScroll 之类的，真的，真正固定的页脚。这也不是 Beta 版的预定功能。考虑 Wink 或 iScroll 以获得真正固定的页眉或页脚。

嗯，它按设计工作。这不是一个非常受欢迎的设计决定。在这里查看一些解决方案***.com/questions/5763619/…

我想补充一点，在我的页脚 div 上具有相同的 data-id="foo" 包括修复了我的页脚栏在按钮按下事件上更改为内联定位的问题。 jquerymobile.com/demos/1.0rc2/docs/toolbars/…

【参考方案4】：

当前的“答案”可能有点误导。使用 touchOverflow 可能会在短期内帮助您，但很快就会消失。如果有人阅读 jQuery mobile blog，他们会注意到 1 月 10 日发布的这个简介：

注意：touchOverflow 将在 1.1 中被弃用——当我们第一次 引入了 touchOverflow 功能，我们认为它是一个很好的方法 利用 ios 中的原生溢出支持带来真正的固定 工具栏和更平滑的过渡，即使它是用于相当狭窄的 当时的一组设备。现在随着对固定的重大变化 为 1.1 计划的标题和过渡，这些将改善 以几乎与 touchOverflow 相同的方式体验，除了它会 在更多平台上工作，复杂性更低，所以我们决定 停用此功能。它将在 1.1 被弃用并在 1.2.我们确实有解决内部滚动溢出区域的未来计划，所以我们在 touchOverflow 上做了很多工作 将被重新利用。

很抱歉将其发布为答案，但我目前无法发表评论。

【参考方案5】：

我们遇到了这个问题，并结合使用了 iScroll (v3) 和 iScroll 的一个不错的 jquery 移动包装器。它完美地工作。在此处查看所有详细信息：

http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

【参考方案6】：

我做了非常简单的事情。使用 CSS 找到解决方案只需为内容设置适当的“最小高度”。将停止页脚在页面内容上跳转。

【参考方案7】：

页脚也没有固定在滚动条上，我也遇到过类似的问题。我的建议？ Sencha 而不是 jQueryMobile，它充满了 bug，还没有准备好投入生产。

页脚还突出显示来自 URL /#page 事物的选定页面 url 在我的情况下会影响页脚菜单。

【讨论】：

煎茶看起来很不错，谢谢。我不记得是什么了，但我听说它有一些问题。

无论如何，用 Sencha 重建整个东西需要一些时间。如果同时有解决此问题的技巧，那就更好了。谢谢！

你看过这个吗？ github.com/jquery/jquery-mobile/… 它可能解决页脚未修复的问题。这是一个已知的错误。

【参考方案8】：

我使用 jquery mobile 1.3.1，而你之前所说的一切都不适用于我的应用程序。但我有这个错误的解决方案。查看我的其他帖子JQueryMobile - fixed footer not fixed after input focus

$('div:jqmData(role="page")').on('pageinit',function()
    $(document)
        .on('focus','input, select, textarea', function()
            $('[data-role="footer"][data-position="fixed"]').hide();
        )
        .on('blur','input, select, textarea',function()
            $('[data-role="footer"][data-position="fixed"]').show();
        );
);

【参考方案9】：

Re：页脚不固定，隐藏了部分页面内容。

我也遇到过这个问题。 原来，我必须将结束内容 div 标签移动到页脚开始之前。如果页脚位于内容 div 标记内 - 并且您打开 >>> data-position="fixed"

我不知道您的其他问题，“页脚在空点击事件上切换”，因为我不知道如何在我的应用中重新创建它。

正在使用...

JQuery Mobile 1.3.2 科尔多瓦 页脚中有一个导航栏和一个广告横幅。