uni-app vue3 midbutton 无法响应点击事件

uni-app vue3 midbutton 无法响应点击事件

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 windows11 bate
HBuilderX类型 Alpha
HBuilderX版本 3.2.14
手机系统 Android
手机系统版本 Android 12
手机厂商 小米
手机机型 K30
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

    "midButton": {  
        "width":"300px",  
        // "iconPath": "static/tabbar/Add.png",  
        "text":"呜呜呜",  
        "height": "300px"  
        // "iconWidth": "128px"  
    }  

// App.vue   
<script setup>  
    import {  
        onLaunch,  
        onShow  
    } from "@dcloudio/uni-app"  
    onLaunch(() => {  
        uni.onTabBarMidButtonTap(() => {  
            console.log("被点击了")  
        })  
    })  
</script>

操作步骤：

  • 创建vue3 uniapp项目
  • 正常添加midbutton
  • 在App.vue中使用uni.onTabBarMidButtonTap填入回调

预期结果：

  • 正常响应点击事件

实际结果：

  • 无法响应点击事件

bug描述：

onLaunch内配置了uni.onTabBarMidButtonTap 点击无法响应回调

App.vue使用了 vue3 setup写法不响应点击事件
切换为 vue2 写法依旧不响应点击事件

但是两种写法onLaunch都正确的触发了

相关链接：


更多关于uni-app vue3 midbutton 无法响应点击事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题已记录，后续优化，已加分，感谢您的反馈！

更多关于uni-app vue3 midbutton 无法响应点击事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


修复了吗，midButton安卓无显示文档显示支持啊

在 uni-app vue3 项目中，midButton 点击事件无法响应通常是由于事件监听时机或配置问题导致的。根据你提供的代码和配置，以下是可能的原因和解决方案：

  1. 事件监听时机问题：uni.onTabBarMidButtonTap 需要在页面初始化完成后注册。在 onLaunch 中注册可能过早，建议在 onShow 或页面生命周期中注册。尝试将事件监听移到 onShow 中：

    onShow(() => {
  uni.onTabBarMidButtonTap(() => {
    console.log("被点击了")
  })
})

  2. midButton 配置检查：确保 midButton 配置在 pages.json 的 tabBar 中正确设置，且路径和样式无误。示例：

    "tabBar": {
  "midButton": {
    "width": "300px",
    "text": "呜呜呜",
    "height": "300px"
  }
}

  3. Vue3 响应式问题：在 Vue3 的 setup 中，确保事件监听函数被正确绑定。可以尝试使用 onMounted 或 nextTick 延迟注册：

    import { onMounted } from 'vue'
onMounted(() => {
  uni.onTabBarMidButtonTap(() => {
    console.log("被点击了")
  })
})
回到顶部