tabbar的页面最底部在uni-app中edge移动端浏览器滚动导致浏览器的底部导航栏隐藏后页面的最后一行无法点击

tabbar的页面最底部在uni-app中edge移动端浏览器滚动导致浏览器的底部导航栏隐藏后页面的最后一行无法点击

操作步骤：

附件中有最简单的复现代码，没有其他特别的地方

预期结果：

预期应该最后一行能正常点击

实际结果：

浏览器的底部导航栏隐藏后，最后一行能无法点击。

bug描述：

tabbar的页面最底部，在edge移动端浏览器中，滚动导致浏览器的底部导航栏隐藏后，页面的最后一行无法点击；

  1. 如果页面高度低于100vh，则正常，因为不会页面滚动，浏览器的底部导航栏不会隐藏。
  2. 只有tabbar的页面会这样，普通页面页面滚动导致浏览器的底部导航栏隐藏后，页面的最后一行可以正常点击。
  3. 测试了小米自带浏览器和chrome手机版浏览器都正常，edge有这个问题。
  4. 注意不是页面的最后一行无法点击，而是当前处于设备可视界面中最底部的元素无法点击。比如附件中的示例中，有20行元素，如果滚动到12时，底部导航栏已经隐藏时，12就无法点击了。当页面继续滚动，13变成最底部，12不在最底部，则12重新恢复可点击。

附件

测试bug专用.zip


更多关于tabbar的页面最底部在uni-app中edge移动端浏览器滚动导致浏览器的底部导航栏隐藏后页面的最后一行无法点击的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于tabbar的页面最底部在uni-app中edge移动端浏览器滚动导致浏览器的底部导航栏隐藏后页面的最后一行无法点击的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的Edge移动端浏览器与uni-app tabbar页面交互时的兼容性问题。主要原因是Edge浏览器在底部导航栏隐藏时会错误计算可视区域高度。

解决方案：

  1. 临时方案：在manifest.json中配置tabbar的"position"为"top"，避免底部冲突
"tabBar": {
  "position": "top"
}
  1. 更稳定的方案：在页面onLoad时动态调整页面底部padding
onLoad() {
  // 仅针对Edge移动端浏览器处理
  if(navigator.userAgent.match(/Edg/i)) {
    const tabbarHeight = 50 // 根据实际tabbar高度调整
    this.$nextTick(() => {
      uni.getSystemInfo({
        success: (res) => {
          const paddingBottom = res.windowHeight - res.safeArea.bottom + tabbarHeight
          this.$refs.container.style.paddingBottom = `${paddingBottom}px`
        }
      })
    })
  }
}
  1. 或者使用CSS固定底部安全区域：
.container {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
回到顶部