@tap事件在uni-app抖音小程序上无效

@tap事件在uni-app抖音小程序上无效

项目 信息
产品分类 uniapp/小程序/字节跳动
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11 专业版24H2
HBuilderX类型 正式
HBuilderX版本号 4.45
第三方开发者工具版本号 4.3.5
基础库版本号 3.52.0.14
项目创建方式 HBuilderX

示例代码：

<map v-if="jobDetails.X && jobDetails.Y" id="map" class="map" :height="500" show-location scale="15" enable-zoom enable-scroll  
     enable-satellite :latitude="jobDetails.Y" :longitude="jobDetails.X" :markers="marker"  
     [@tap](/user/tap)='handleClickMap'></map>  

...

const handleClickMap = (e) => {  
    const {  
        detail  
    } = e  
    const {  
        latitude,  
        longitude  
    } = detail  
    popup.value.open()  
}

操作步骤：

  • 点击地图，直接打开popup组件，选择选项

预期结果：

  • 点击地图，直接打开popup组件，选择选项

实际结果：

  • 真机调试无效

bug描述：

@tap事件在模拟器上点击时有效的，但是真机调试就没有效果了


更多关于@tap事件在uni-app抖音小程序上无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

模拟器正常，真机不正常？测试了哪些真机，多测几台安卓 ios 设备，说一下结果，并贴一下完整单页面源码方便我复现。

更多关于@tap事件在uni-app抖音小程序上无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的抖音小程序中，map组件的@tap事件确实存在兼容性问题。这是由于字节跳动小程序平台对map组件的事件处理机制与微信小程序有所不同。

解决方案：

  1. 改用@click事件替代@tap：
<map [@click](/user/click)="handleClickMap"></map>
  1. 如果仍然无效，可以尝试使用catchtap：
<map catchtap="handleClickMap"></map>
  1. 或者使用bindtap：
<map bindtap="handleClickMap"></map>
  1. 如果上述方法都无效，建议使用cover-view覆盖一个透明按钮来实现点击事件：
<map>
  <cover-view [@click](/user/click)="handleClickMap" style="width:100%;height:100%;opacity:0"></cover-view>
</map>
回到顶部