做移动端 Web 开发的人多半都跟 jQueryMobile 打过照面。这个框架放到今天来看确实有点“老古董”的意思但你要是敢在老项目里把它直接删掉线上页面分分钟给你上一课。今天想聊的是 jQueryMobile 里面最基础、也最容易被轻视的一个部件——导航栏。顶部导航、底部 Tab、侧边菜单整个 App 的骨架全靠它撑着。很多新人上来就套一个>div>div>div>!DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 titlejQueryMobile 导航栏示例/title link relstylesheet hrefjquery.mobile-1.4.5.min.css script srcjquery-1.11.3.min.js/script script srcjquery.mobile-1.4.5.min.js/script /head body div>.ui-icon-myicon:after { background-image: url(data:image/svgxml,...); background-size: 18px 18px; }这里有个避坑点>$(document).on(pagecontainerbeforeshow, function (e, ui) { var pageId # ui.absPage.attr(id); $(div[data-rolenavbar] a).each(function () { if ($(this).attr(href) pageId) { $(this).addClass(ui-btn-active ui-state-persist); } else { $(this).removeClass(ui-btn-active ui-state-persist); } }); });这段代码的原理每一次页面显示前找出导航栏里所有链接对比当前页面的id精确切换高亮。注意事件名用的是 jQuery Mobile 1.4 以后的pagecontainerbeforeshow。如果项目还在用老旧的 1.0/1.1 版本事件名要换成pageshow参数结构也不一样这点特别容易踩坑。3.4 高度适配别被状态栏和系统导航栏坑了移动端页面做导航栏永远绕不开“系统栏”问题。这里把两种常见情况一起说清楚。第一种是顶部状态栏高度。现在做微信小程序的人都知道小程序顶部导航高度不是固定值iPhone 刘海屏状态栏大概 44 像素普通安卓手机可能是 24 像素不同机型差异很大。jQueryMobile 的老页面同样会遇到这个矛盾只是表现更隐蔽页面header被系统状态栏盖住标题文字往上顶甚至触摸返回按钮没反应。解决办法是在页面加载时读取实际状态栏高度动态给页面容器设置padding-topvar statusBarHeight window.screen.height - window.innerHeight; if (statusBarHeight 0) { $(.ui-page).css(padding-top, statusBarHeight px); }第二种是安卓系统底部导航栏/手势条重叠。新版 Android 系统底部会有一条手势指示条或虚拟按键区域浏览器视口高度默认不包含它但 jQueryMobile 的footer用了position: fixed视觉上会对齐到视口底部于是出现在真机上“导航栏被系统手势条盖住”。这里要用 css env 做安全区适配.ui-footer-fixed { padding-bottom: env(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom); }如果项目必须兼容非常旧的 WebView可以在 JS 里判断window.navigator.userAgent检测到安卓版本后再给 footer 追加一个固定的padding-bottom。这个问题只有真机上才看得出来浏览器模拟器里一切正常最容易让人掉以轻心。4. 高频翻车现场导航栏问题排查实录4.1 点击图标不跳转反而弹回当前页或首页这是导航栏最常见的毛病。我之前排查过一个线上商城用户点底部导航的“订单”页面死活跳不过去地址栏的 hash 变了一下又弹回首页。整个现象很像某些 CMS 模板里“导航栏目全部跳转到首页”的问题但根因不一样。jQueryMobile 多页模板里如果多个page的id重名或者>$(#nav-panel).panel().enhanceWithin();没有经过初始化dom 结构是有了但缺少框架生成的ui-panel等 class点击事件自然不生效看起来就像“导航栏不见了”。另外如果 panel 结构放在当前页面之外也就是在错误的page容器里它也不会被正常渲染。所以在动态创建侧边导航时我的习惯做法是不要在页面加载后拼字符串。老老实实把 panel 的 HTML 写在div>$(window).on(scrollstop, function () { $(.ui-footer-fixed).css(transform, translateY(0)); });如果还是抖我会直接放弃>html, body { height: 100%; overflow: hidden; }但加了overflow: hidden后页面就滚不动了所以一般只用在纯 Tab 类页面。JS 层面更靠谱监听resize事件动态调整 footer 占位高度window.addEventListener(resize, function () { var footerHeight $(div[data-rolefooter]).outerHeight(); $(body).css(padding-bottom, footerHeight px); });记得在调整后触发一下 jQueryMobile 的刷新接口让框架重新计算布局否则占位高度还是旧值。5. 那些文档里没写清楚的经验5.1 动态插入导航按钮后必须 refresh很多人维护老项目时会在某个操作完成后往导航栏里 add 一个新的li例如“登录后多一个个人中心入口”$(#nav ul).append(lia href#page-user>$(#nav).navbar(refresh);refresh前段时间我问过不少同行很多人甚至不知道 navbar 有这个接口。这一步必须放在按钮加完之后而且要保证ul已经在页面上可见否则刷新时宽度计算为 0样式依然不对。5.2 多页模板的滚动位置会丢jQueryMobile 的多个 page 同时存在时页面切换本质上是 display:none 和 display:block 的切换。每次切走再切回来滚动条位置一般默认回到顶部。如果你的导航栏链接指向的内容列表很长这个体验会非常差——用户从“订单”切到“我的”再回来订单列表滚回了第一屏。规避手段有两种一是页面销毁时不销毁内容保留 scroll 状态的临时标记二是在pagecontainershow事件里恢复$(document).on(pagecontainershow, function (e, ui) { var pageId ui.absPage.attr(id); scrollPositions scrollPositions || {}; if (scrollPositions[pageId]) { $.mobile.silentScroll(scrollPositions[pageId]); } });不要用window.scrollTo去恢复因为在多 page 结构下滚动容器可能是页面内的 div不是 window。用$.mobile.silentScroll最省事它知道正确的滚动容器在哪。5.3 点击导航栏的 300ms 延迟和触摸反馈老项目里经常会遇到“我点导航栏了但过了好像 300 毫秒才反应”。这是移动端浏览器默认的点击延迟jQueryMobile 在部分场景下已经内置了 fastclick 式的处理但如果你自己绑定的是原生 click 事件延迟依然存在。不要盲目引入 fastclick 库去改所有页面很容易和 jQueryMobile 的 tap 事件打架。更好的做法是在导航栏的a标签上用vclick事件替代click$(#nav a).on(vclick, function (e) { // 处理你自己的逻辑 });vclick是 jQueryMobile 封装的虚拟点击事件会在 touchend 后立即触发同时兼顾鼠标环境。缺陷是虚拟事件可能和原生 click 重复触发所以如果逻辑里有跳转最好加一个执行锁。5.4 用 CSS 微调导航栏的最终高度最后一点小经验jQueryMobile 导航栏默认高度偏高尤其在安卓后台 WebView 里会显得笨重。通常我会设置.ui-navbar li a { padding: 0.9em 0.4em; font-size: 12px; }细调字体大小和上下 padding 后整个导航栏能瘦一圈观感会好很多。这个纯属视觉洁癖不影响功能但在多款安卓真机上测试后点击热区依然足够大。导航栏这种天天被手指触摸的组件永远是“看得舒服”和“按得准”并重。6. 写在最后的个人习惯碰过太多 jQueryMobile 老项目之后我现在的检查习惯已经固定下来凡是经手一个带导航栏的页面第一件事用控制台全局搜一遍href#和href/看看有没有空跳转假链接第二件事检查所有 navbar 相关的动态插入代码确认刷新接口有没有调用第三件事拿一台真机打开页面反复拉动地址栏看 footer 会不会被顶出屏幕。老框架确实谈不上优雅但它承担着大量生产环境的移动入口。你只需要把几个关键细节管住导航栏就能老老实实工作很多年。希望这些排查思路和实现经验能帮你少走几步弯路。
做移动端 Web 开发的人多半都跟 jQueryMobile 打过照面。这个框架放到今天来看确实有点“老古董”的意思但你要是敢在老项目里把它直接删掉线上页面分分钟给你上一课。今天想聊的是 jQueryMobile 里面最基础、也最容易被轻视的一个部件——导航栏。顶部导航、底部 Tab、侧边菜单整个 App 的骨架全靠它撑着。很多新人上来就套一个>div>div>div>!DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 titlejQueryMobile 导航栏示例/title link relstylesheet hrefjquery.mobile-1.4.5.min.css script srcjquery-1.11.3.min.js/script script srcjquery.mobile-1.4.5.min.js/script /head body div>.ui-icon-myicon:after { background-image: url(data:image/svgxml,...); background-size: 18px 18px; }这里有个避坑点>$(document).on(pagecontainerbeforeshow, function (e, ui) { var pageId # ui.absPage.attr(id); $(div[data-rolenavbar] a).each(function () { if ($(this).attr(href) pageId) { $(this).addClass(ui-btn-active ui-state-persist); } else { $(this).removeClass(ui-btn-active ui-state-persist); } }); });这段代码的原理每一次页面显示前找出导航栏里所有链接对比当前页面的id精确切换高亮。注意事件名用的是 jQuery Mobile 1.4 以后的pagecontainerbeforeshow。如果项目还在用老旧的 1.0/1.1 版本事件名要换成pageshow参数结构也不一样这点特别容易踩坑。3.4 高度适配别被状态栏和系统导航栏坑了移动端页面做导航栏永远绕不开“系统栏”问题。这里把两种常见情况一起说清楚。第一种是顶部状态栏高度。现在做微信小程序的人都知道小程序顶部导航高度不是固定值iPhone 刘海屏状态栏大概 44 像素普通安卓手机可能是 24 像素不同机型差异很大。jQueryMobile 的老页面同样会遇到这个矛盾只是表现更隐蔽页面header被系统状态栏盖住标题文字往上顶甚至触摸返回按钮没反应。解决办法是在页面加载时读取实际状态栏高度动态给页面容器设置padding-topvar statusBarHeight window.screen.height - window.innerHeight; if (statusBarHeight 0) { $(.ui-page).css(padding-top, statusBarHeight px); }第二种是安卓系统底部导航栏/手势条重叠。新版 Android 系统底部会有一条手势指示条或虚拟按键区域浏览器视口高度默认不包含它但 jQueryMobile 的footer用了position: fixed视觉上会对齐到视口底部于是出现在真机上“导航栏被系统手势条盖住”。这里要用 css env 做安全区适配.ui-footer-fixed { padding-bottom: env(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom); }如果项目必须兼容非常旧的 WebView可以在 JS 里判断window.navigator.userAgent检测到安卓版本后再给 footer 追加一个固定的padding-bottom。这个问题只有真机上才看得出来浏览器模拟器里一切正常最容易让人掉以轻心。4. 高频翻车现场导航栏问题排查实录4.1 点击图标不跳转反而弹回当前页或首页这是导航栏最常见的毛病。我之前排查过一个线上商城用户点底部导航的“订单”页面死活跳不过去地址栏的 hash 变了一下又弹回首页。整个现象很像某些 CMS 模板里“导航栏目全部跳转到首页”的问题但根因不一样。jQueryMobile 多页模板里如果多个page的id重名或者>$(#nav-panel).panel().enhanceWithin();没有经过初始化dom 结构是有了但缺少框架生成的ui-panel等 class点击事件自然不生效看起来就像“导航栏不见了”。另外如果 panel 结构放在当前页面之外也就是在错误的page容器里它也不会被正常渲染。所以在动态创建侧边导航时我的习惯做法是不要在页面加载后拼字符串。老老实实把 panel 的 HTML 写在div>$(window).on(scrollstop, function () { $(.ui-footer-fixed).css(transform, translateY(0)); });如果还是抖我会直接放弃>html, body { height: 100%; overflow: hidden; }但加了overflow: hidden后页面就滚不动了所以一般只用在纯 Tab 类页面。JS 层面更靠谱监听resize事件动态调整 footer 占位高度window.addEventListener(resize, function () { var footerHeight $(div[data-rolefooter]).outerHeight(); $(body).css(padding-bottom, footerHeight px); });记得在调整后触发一下 jQueryMobile 的刷新接口让框架重新计算布局否则占位高度还是旧值。5. 那些文档里没写清楚的经验5.1 动态插入导航按钮后必须 refresh很多人维护老项目时会在某个操作完成后往导航栏里 add 一个新的li例如“登录后多一个个人中心入口”$(#nav ul).append(lia href#page-user>$(#nav).navbar(refresh);refresh前段时间我问过不少同行很多人甚至不知道 navbar 有这个接口。这一步必须放在按钮加完之后而且要保证ul已经在页面上可见否则刷新时宽度计算为 0样式依然不对。5.2 多页模板的滚动位置会丢jQueryMobile 的多个 page 同时存在时页面切换本质上是 display:none 和 display:block 的切换。每次切走再切回来滚动条位置一般默认回到顶部。如果你的导航栏链接指向的内容列表很长这个体验会非常差——用户从“订单”切到“我的”再回来订单列表滚回了第一屏。规避手段有两种一是页面销毁时不销毁内容保留 scroll 状态的临时标记二是在pagecontainershow事件里恢复$(document).on(pagecontainershow, function (e, ui) { var pageId ui.absPage.attr(id); scrollPositions scrollPositions || {}; if (scrollPositions[pageId]) { $.mobile.silentScroll(scrollPositions[pageId]); } });不要用window.scrollTo去恢复因为在多 page 结构下滚动容器可能是页面内的 div不是 window。用$.mobile.silentScroll最省事它知道正确的滚动容器在哪。5.3 点击导航栏的 300ms 延迟和触摸反馈老项目里经常会遇到“我点导航栏了但过了好像 300 毫秒才反应”。这是移动端浏览器默认的点击延迟jQueryMobile 在部分场景下已经内置了 fastclick 式的处理但如果你自己绑定的是原生 click 事件延迟依然存在。不要盲目引入 fastclick 库去改所有页面很容易和 jQueryMobile 的 tap 事件打架。更好的做法是在导航栏的a标签上用vclick事件替代click$(#nav a).on(vclick, function (e) { // 处理你自己的逻辑 });vclick是 jQueryMobile 封装的虚拟点击事件会在 touchend 后立即触发同时兼顾鼠标环境。缺陷是虚拟事件可能和原生 click 重复触发所以如果逻辑里有跳转最好加一个执行锁。5.4 用 CSS 微调导航栏的最终高度最后一点小经验jQueryMobile 导航栏默认高度偏高尤其在安卓后台 WebView 里会显得笨重。通常我会设置.ui-navbar li a { padding: 0.9em 0.4em; font-size: 12px; }细调字体大小和上下 padding 后整个导航栏能瘦一圈观感会好很多。这个纯属视觉洁癖不影响功能但在多款安卓真机上测试后点击热区依然足够大。导航栏这种天天被手指触摸的组件永远是“看得舒服”和“按得准”并重。6. 写在最后的个人习惯碰过太多 jQueryMobile 老项目之后我现在的检查习惯已经固定下来凡是经手一个带导航栏的页面第一件事用控制台全局搜一遍href#和href/看看有没有空跳转假链接第二件事检查所有 navbar 相关的动态插入代码确认刷新接口有没有调用第三件事拿一台真机打开页面反复拉动地址栏看 footer 会不会被顶出屏幕。老框架确实谈不上优雅但它承担着大量生产环境的移动入口。你只需要把几个关键细节管住导航栏就能老老实实工作很多年。希望这些排查思路和实现经验能帮你少走几步弯路。
