承
  • 发布:2019-04-26 09:31
  • 更新:2023-06-30 10:41
  • 阅读:20873

【报Bug】uniapp部分点击事件失效

分类:uni-app

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]
按钮点击部分失效,完全不执行,v-for,v-if,编译不了wx:for,wx;if

重现步骤

[步骤]

[结果]
连console.log都执行不了
[期望]
按钮能有点击的效果
[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
1.8.1.2019.0330
[IDE版本号]

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]
微信小程序点击失效
[运行端版本号]
1.02.1904090
[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
HBuilderX
[编译模式是老模板模式还是新的自定义组件模式?]
老模板模式

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]499990617

2019-04-26 09:31 负责人:无 分享
已邀请:
t***@qq.com

t***@qq.com

z-index的问题,因为用平板,有的元素把你要点击的位置遮挡了

  • 8***@qq.com

    牛逼,我的问题确实是这个。

    2023-08-11 08:41

g***@outlook.com

g***@outlook.com - conwy

我也是遇到这样的事情,@chilk @tap 事件无效。 刚启动APP 按钮还能点击。多点几次就无效,没反应了。

  • 3***@qq.com

    好像是有延迟的原因,并不是无效,有时点击会等个200ms 才会执行

    2022-09-26 13:47

6***@qq.com

6***@qq.com

什么情况了??

  • 1***@qq.com

    我的是view标签添加的点击事件,flex布局,下面有个view放的字体另一个view放的图片,只有点击图片才能触发

    2023-11-01 15:15

  • qjp

    回复 1***@qq.com: 俺也一样,有解决方案了吗

    2024-01-18 15:25

ZGH0709

ZGH0709

未复现 bug, 发个 demo?

m***@foxmail.com

m***@foxmail.com - jiang

我也是,点击事件无效 @click @tap都不行

梦里追逐

梦里追逐

遇到类似的问题
v-else上面添加@click事件不生效

TBaymax

TBaymax

我也遇到了,只有部分不行,换@tap就可以了

DCloud_UNI_Anne

DCloud_UNI_Anne

请提供能复现您问题的demo

  • m***@foxmail.com

    我的问题跟这个一样,例子已经给你了,结果被你删了帖,你是刚毕业吧?!

    2020-11-25 11:00

  • DCloud_UNI_Anne

    回复 m***@foxmail.com: 没有删您的贴哦,如果文章中有禁止发表的内容会被系统屏蔽的。您如果要报bug,请去提交一下报BUG模板,提供复现示例,我们会尽快为您处理的,感谢您的反馈!

    2020-11-26 10:41

  • m***@foxmail.com

    回复 DCloud_UNI_Anne: 问题被屏蔽?为什么我自己都无法看到了?这不是删除是什么?有问题我自己可以改啊!完全没给机会就删除了!

    2020-11-26 10:56

  • EJRUN以界

    uniapp 编译到 app 后,click 事件仍会失效。估计这是一个隐藏了多年的底层逻辑bug。


    原因分析:不是click 失效,而是 组件 的 emit 事件 ,页面无法捕捉。


    复现方法:

    1、做一个组件 A ,A emit("click")

    2、做一个页面 ,在其中 用 v-if 使用组件A ,比如 <A v-if="condition" @click="myclick" />

    3、首次进入页面时,点击A ,myclick 事件会被触发,当v-if == false ,组件被隐藏,然后 v-if == true 组件再显现时,myclick 事件就无法触发了。

    2022-10-11 08:43

  • EJRUN以界

    一定要用 自定义组件 A ,反复切换 vif 状态几次,问题必定会重现。

    如果时 uniapp 内置组件,就没有这个问题

    v-if == false 时,组件被销毁

    当 v-if == true 组件再次被创建时,@ 要绑定的事件,没有被正确绑上,所以就出现点击无效。

    2022-10-11 08:57

2***@qq.com

2***@qq.com

tap click失效 <!-- eslint-disable vue/multi-word-component-names --> <template> <view> <view class="content"> <TAbbar :user-type="userType" @change="swtichSwiper" /> <swiper current="current" duration="300" class="scroll-view-height"
@change="swipeIndex"
>
<swiper-item>
<scroll-view scroll-y="true" class="list-content">
<view
v-for="(item, index) in list" key="'进行中' + item.id" class="list-item"
hover-class="list-itemHover"
@tap="navTo(item)"
>
<view class="list-item-huiyi">
<view class="list-item-huiyi-name">
会议名称:<text style="color: red">
{{ ${item.title} (${index + 1}) }}
</text>
</view>
</view>
<view class="list-item-meeting">
<view class="list-item-meeting-type">
会议类型: {{ item.type }}
</view>
<view class="list-item-meeting-type">
主持人: {{ item.name }}
</view>
<view class="list-item-meeting-type">
召开时间: {{ item.dataTime }}
</view>
<view class="list-item-meeting-type">
召开地点: {{ item.site }}
</view>
</view>
</view>
<view
v-if="list.length"
class="scroll-view-height-noCard"
hover-class="list-itemHover"
@tap="load(item)"
>
<text>加载更多</text>
</view>
<view v-if="!list.length" class="scroll-view-height-noCard">
<text>当前没有进行的会议</text>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="list-content">
<view
v-for="(item, index) in list" key="'进行中' + index" class="list-item"
hover-class="list-itemHover"
@tap="navTo(item)"
>
<view class="list-item-huiyi">
<view class="list-item-huiyi-name">
会议名称:<text style="color: red">
{{ ${item.title} (${index + 1}) }}
</text>
</view>
</view>
<view class="list-item-meeting">
<view class="list-item-meeting-type">
会议类型: {{ item.type }}
</view>
<view class="list-item-meeting-type">
主持人: {{ item.name }}
</view>
<view class="list-item-meeting-type">
召开时间: {{ item.dataTime }}
</view>
<view class="list-item-meeting-type">
召开地点: {{ item.site }}
</view>
</view>
</view>
<view
v-if="list.length"
class="scroll-view-height-noCard"
hover-class="list-itemHover"
@tap="load(item)"
>
<text>加载更多</text>
</view>
<view v-if="!list.length" class="scroll-view-height-noCard">
<text>当前没有进行的会议</text>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="list-content">
<view
v-for="(item, index) in list" key="'进行中' + index" class="list-item"
hover-class="list-itemHover"
@tap="navTo(item)"
>
<view class="list-item-huiyi">
<view class="list-item-huiyi-name">
会议名称:<text style="color: red">
{{ ${item.title} (${index + 1}) }}
</text>
</view>
</view>
<view class="list-item-meeting">
<view class="list-item-meeting-type">
会议类型: {{ item.type }}
</view>
<view class="list-item-meeting-type">
主持人: {{ item.name }}
</view>
<view class="list-item-meeting-type">
召开时间: {{ item.dataTime }}
</view>
<view class="list-item-meeting-type">
召开地点: {{ item.site }}
</view>
</view>
</view>
<view
v-if="list.length"
class="scroll-view-height-noCard"
hover-class="list-itemHover"
@tap="load(item)"
>
<text>加载更多</text>
</view>
<view v-if="!list.length" class="scroll-view-height-noCard">
<text>当前没有进行的会议</text>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, onBeforeMount } from 'vue'
import { onResize } from '@dcloudio/uni-app'

const { proxy } = getCurrentInstance() as any
const current = ref(0)
const userType = ref(0)
// eslint-disable-next-line no-unused-vars
const scrollerHeight = ref('')
// eslint-disable-next-line no-unused-vars
const scrollerWidth = ref('')
const list = ref([
{
title: '关于高新区清扫黄赌毒等一系列有关问题',
type: '常委会',
name: '刘德华',
dataTime: '2022-10-01 12:00',
site: '成都是高新区环球中心'
}
])
const swipeIndex = (index: Number) => {
proxy.userType = index.detail.current
}
const swtichSwiper = (index: any) => {
proxy.current = index
}
const navTo = (item: any) => {
uni.navigateTo({
url: /pages/details/details?item=${encodeURIComponent(JSON.stringify(item))}
})
}
const load = () => {
const listItem = {
title: '测试',
name: '测试',
type: '人大',
dataTime: '2022-12-12 12:00',
site: 'redaction'
}
uni.showLoading({
title: '加载中'
})
setTimeout(() => {
uni.hideLoading()
proxy.list.push(listItem)
}, 500)
}
onResize(() => {
uni.getSystemInfo({
// eslint-disable-next-line object-shorthand, func-names
success: function (res) {
// 获取屏幕的高度
proxy.scrollerHeight = ${res.windowHeight}px
// 获取屏幕的宽度
proxy.scrollerWidth = ${res.windowWidth}px
}
})
})
onBeforeMount(() => {
uni.getSystemInfo({
// eslint-disable-next-line object-shorthand, func-names
success: function (res) {
// 获取屏幕的高度
proxy.scrollerHeight = ${res.windowHeight}px
// 获取屏幕的宽度
proxy.scrollerWidth = ${res.windowWidth}px
}
})
})
</script>

<style lang="scss" scoped>
.content {
width: 100%;
height: 100vh;
background-color: $user-bg-color;
&-text-area {
display: flex;
justify-content: center;
}
}
.scroll-view-height {
overflow: auto;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
overflow-x: hidden;
overflow-y: scroll;
/ 页面高度减去包含状态栏、标题、tab组件的高度 /
height: calc(100vh - var(--status-bar-height) - 300rpx);
&-noCard {
width: 100%;
height: 10%;
margin: auto;
background-color: $user-bg-color;
display: flex;
align-items: center;
justify-content: center;
color: var(--van-black);
box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.1);
border-radius: 10upx;
}
}

.list-content {
overflow-x: hidden;
overflow-y: scroll;
height: 100%;
width: 100%;
background-color: $user-bg-color;
}
.list-itemHover {
background-color: #eee;
}
.list-item {
height: 20%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin: 0.5% 0;
border-bottom: solid 5rpx $brimColor;
border-top: solid 5rpx $brimColor;
overflow: auto;
&-huiyi {
padding-top: 10rpx;
height: 40%;
width: 100%;
font-size: 1.2em;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
&-name {
height: 100%;
width: 80%;
}
}
&-meeting {
height: 100%;
width: 80%;
font-size: 1.2em;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: space-between;
flex-wrap: wrap;
&-type {
border-radius: 5px;
box-sizing: border-box;
width: calc(50% - 1rpx);
height: calc(50% - 1rpx);
float: left;
}
}
}
</style>

  • 2***@qq.com

    h5能正常点击,app直接失效

    2022-09-21 15:17

EJRUN以界

EJRUN以界

uniapp 编译到 app 后,click 事件仍会失效。估计这是一个隐藏了多年的底层逻辑bug。

原因分析:不是click 失效,而是 组件 的 emit 事件 ,页面无法捕捉。

复现方法:
1、做一个组件 A ,A emit("click")
2、做一个页面 ,在其中 用 v-if 使用组件A ,比如 <A v-if="condition" @click="myclick" />
3、首次进入页面时,点击A ,myclick 事件会被触发,当v-if == false ,组件被隐藏,然后 v-if == true 组件再显现时,myclick 事件就无法触发了。

2***@qq.com

2***@qq.com

我也遇到了这个问题,我在拆分组件的时候,将一个列表的 item 拆分成 独立的小组件,方便其它页面使用,但是拆分完成后,我列表循环这个组件,同时绑定了 click 事件,结果在小程序中调试的时候 click 事件无效,我把组件的层级调成99999、将容纳组件的的列表组件从 scroll-view 换成 view 还是不行。。。

但是在小组件内部 click 事件是有效的,所以我想了个法子,定义一个 事件props ,通过父组件传递 事件prop 的方式,在点击的时候调用这个事件 prop ,终于行了。。

要回复问题请先登录注册