cover-view在uni-app运行编译至app时点击事件失效

cover-view在uni-app运行编译至app时点击事件失效

开发环境 版本号 项目创建方式
Windows 10 专业版 22H2 (19045.6466) HBuilderX
Android Android 15
小米
Redmi note12 turbo

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.85

手机系统：Android

手机系统版本号：Android 15

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

<cover-view class="checkout_b" @click="onplaceorder">  
    <cover-view class="checkout_b_l">  
        <cover-view>实付款</cover-view>  
        <cover-view>{{ numberFilter(info.price) }}</cover-view>  
    </cover-view>  
    <cover-view  
        :class="`checkout_b_r ${saedit.telephone ? '' : 'disabled'}`">提交订单</cover-view>  
</cover-view>

操作步骤：

  • 把代码粘贴至template中，运行

预期结果：

  • 正常点击

实际结果：

  • 点击无效

bug描述：

uniapp运行编译至app端时，cover-view上绑定的点击事件click失效，无法点击。


更多关于cover-view在uni-app运行编译至app时点击事件失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好 我测试用你的代码片段加上样式是可以出触发点击的 可以发复现项目吗？

更多关于cover-view在uni-app运行编译至app时点击事件失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，cover-view组件在App端的点击事件确实存在一些限制。根据官方文档和开发经验，cover-view主要用于覆盖在原生组件之上（如map、video等），其事件处理机制与普通view有所不同。

可能原因及解决方案：

  1. 事件穿透问题：cover-view的点击事件可能被下层原生组件拦截。建议检查页面结构，确保cover-view没有与其他原生组件产生冲突。

  2. 样式影响：确认cover-view具有足够的点击区域，添加明确的宽高样式：

.checkout_b {
  width: 100%;
  height: 50px;
  /* 其他样式 */
}
  1. 使用@tap替代：在App端可以尝试使用[@tap](/user/tap)事件替代@click：
<cover-view class="checkout_b" [@tap](/user/tap)="onplaceorder">
回到顶部