uni-app 底部增加凸起tabbar OPPO机型点击无反应

uni-app 底部增加凸起tabbar OPPO机型点击无反应

示例代码：

{
    "tabBar":{  
        "color":"#888888",  //tabBar 字体颜色  
        "selectedColor":"#333333",  //tabBar 被选择选择颜色  
        "borderStyle":"black",      //tabBar 上边框颜色  
        "backgroundColor":"#ffffff",    //tabBar背景颜色  
        /* 最少2个 最多5个 导航项*/  
        "list":[  
            {  
                "pagePath":"pages/index/index",  
                "text":"首页",  
                "iconPath":"static/ds/s_12.png",  
                "selectedIconPath":"static/ds/s_1.png"  
            },  
            {  
                "pagePath":"pages/pacContract/pacContract",  
                "text":"合同管理",  
                "iconPath":"static/ds/n2_2.png",  
                "selectedIconPath":"static/ds/n2_1.png"  
            },  
            {  
                "pagePath":"pages/index/bookindex",  
                "text":"通讯录",  
                "iconPath":"static/ds/3-2.png",  
                "selectedIconPath":"static/ds/3-1.png"  
            },  
            {  
                "pagePath":"pages/index/myindex",  
                "text":"我的",  
                "iconPath":"static/ds/s_52.png",  
                "selectedIconPath":"static/ds/s_5.png"  
            }  
        ],  
        "midButton": {  
            "text":"开始签约",  
            "width": "75px",  
            "height": "62px",  
            "iconPath": "static/ds/qianyue.png",  
            "iconWidth": "38px"  
        }  
    },  
    // 登录的状态下 点击中间凸起的按钮 触发检测操作  
    uni.onTabBarMidButtonTap((e) =>{  
        console.log('触发点击')  
        uni.showLoading({title: '加载中'});  
    })
}

操作步骤：

  • 创建凸起tabbar,（华为、小米、vivo）安卓机型和iOS机型测试可以点击，OPPO机型点击没反应

预期结果：

  • 安卓机型和iOS机型测试都要可以点击

实际结果：

  • 创建凸起tabbar,（华为、小米、vivo）安卓机型和iOS机型测试可以点击，OPPO机型点击没反应

bug描述：

  • app底部增加凸起tabbar，点击无反应

示例图片


更多关于uni-app 底部增加凸起tabbar OPPO机型点击无反应的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

查看相关问题：https://ask.dcloud.net.cn/question/134546

更多关于uni-app 底部增加凸起tabbar OPPO机型点击无反应的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中实现底部凸起的 TabBar 时，如果在 OPPO 机型上点击无反应，可能是由于以下几个原因导致的：

1. Z-Index 问题

  • 凸起的 TabBar 通常使用 position: fixed 定位，并且需要设置较高的 z-index 以确保它位于页面的最上层。如果 z-index 设置不当，可能会导致点击事件被其他元素遮挡。
  • 解决方案: 确保你的凸起 TabBar 的 z-index 足够高，通常可以设置为 9999 或更高。
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

2. 点击区域问题

  • 凸起的 TabBar 可能有部分区域超出了常规的点击区域，导致点击事件无法正确触发。
  • 解决方案: 确保凸起部分的点击区域足够大，并且使用了正确的 padding 或 margin 来扩大点击区域。
.custom-tabbar .tab-item {
  padding: 10px;
}

3. 事件绑定问题

  • 确保你正确绑定了点击事件。有时候，事件绑定可能没有正确应用到凸起的 TabBar 上。
  • 解决方案: 检查你的代码，确保每个 TabBar 项都正确绑定了 @click 事件。
<div class="custom-tabbar">
  <div class="tab-item" @click="switchTab(0)">首页</div>
  <div class="tab-item" @click="switchTab(1)">分类</div>
  <div class="tab-item" @click="switchTab(2)">我的</div>
</div>

4. OPPO 机型的兼容性问题

  • 某些 OPPO 机型可能存在特定的兼容性问题，导致点击事件无法正常触发。
  • 解决方案: 尝试在 OPPO 机型上使用 @touchstart 事件代替 @click 事件，或者同时绑定 @click 和 @touchstart 事件。
<div class="custom-tabbar">
  <div class="tab-item" @click="switchTab(0)" @touchstart="switchTab(0)">首页</div>
  <div class="tab-item" @click="switchTab(1)" @touchstart="switchTab(1)">分类</div>
  <div class="tab-item" @click="switchTab(2)" @touchstart="switchTab(2)">我的</div>
</div>

5. 样式覆盖问题

  • 某些 OPPO 机型的系统样式可能会覆盖你的自定义样式，导致点击事件无法正常触发。
  • 解决方案: 使用 !important 强制覆盖系统样式，或者检查是否有其他样式影响了你的 TabBar。
.custom-tabbar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

6. 调试工具

  • 使用 OPPO 机型的开发者工具或 Chrome 的远程调试功能，检查点击事件是否被正确触发，或者是否有其他元素遮挡了点击区域。

7. uni-app 版本问题

  • 确保你使用的是最新版本的 uni-app，旧版本可能存在一些兼容性问题。
  • 解决方案: 更新 uni-app 到最新版本，并重新编译项目。

8. 自定义 TabBar 的实现

  • 如果你使用的是 uni-app 的自定义 TabBar 功能，确保你按照官方文档正确配置了 custom-tab-bar 组件。
{
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  }
}
回到顶部