uni-app中uni-swipe-action-item组件@click="bindClick"事件触发两次问题

开发环境	版本号	项目创建方式
Windows		HBuilderX
	Windows 10
	3.1.13
Android
	Android 10
	华为
	荣耀8X

### 示例代码：

```html
<template>  
    <view>        
        <uni-list>  
            <!--下面两个组件都要加上-->  
            <uni-swipe-action>  
                <uni-swipe-action-item :right-options="options" [@click](/user/click)="bindClick">  
                    <uni-list-item :showArrow="true">  
                        <view class="text-secondary">  
                            <view class="d-flex a-center">  
                                <text class="main-text-color">楚绵</text>  
                                152****5266  
                                <text class="main-text-color">[默认]</text>  
                            </view>  
                            <view>  
                                广东省 广州市 白云区  
                            </view>  
                            <view>  
                                xxx街道  
                            </view>  
                        </view>  
                    </uni-list-item>  
                </uni-swipe-action-item>  

            </uni-swipe-action>  
        </uni-list>  
    </view>  

</template>  

<script>  
    import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue";  
    import uniSwipeAction from "@/components/uni-ui/uni-swipe-action/uni-swipe-action.vue";  
    import uniSwipeActionItem from "@/components/uni-ui/uni-swipe-action-item/uni-swipe-action-item.vue";  

    export default {  
        components:{  
            uniListItem,  
            uniSwipeAction,  
            uniSwipeActionItem  
        },  
        data() {  
            return {  
                options: [{  
                    text: '修改',  
                    style: {  
                        backgroundColor: '#007aff'  
                    }  
                }, {  
                    text: '删除',  
                    style: {  
                        backgroundColor: '#dd524d'  
                    }  
                }]  
            }  
        },  
        onNavigationBarButtonTap(e){  
            if(e.index===0){  
                uni.navigateTo({  
                    url:'/pages/user-path-edit/user-path-edit'  
                })  
            }  
        },  
        methods: {  
            bindClick(value){  
                switch(value.index){  
                    case 0:  
                        console.log('修改');  
                        break;  
                    case 1:  
                        console.log('删除');  
                        break;  
                }  
            }  
        }  
    }  

</script>  

<style>  

</style>

操作步骤：

无

预期结果：

15:16:23.778 修改 at pages/user-path-list/user-path-list.vue:66

实际结果：

15:16:23.778 修改 at pages/user-path-list/user-path-list.vue:66
15:16:23.800 修改 at pages/user-path-list/user-path-list.vue:66

bug描述：

uni-swipe-action-item里面传递点击事件[@click](/user/click)="bindClick"的时候，bindClick会被执行两次

更多关于uni-app中uni-swipe-action-item组件@click="bindClick"事件触发两次问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 1楼

更多关于uni-app中uni-swipe-action-item组件@click="bindClick"事件触发两次问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

这是一个已知的uni-ui组件事件冒泡问题。uni-swipe-action-item的点击事件会触发两次，主要是因为组件内部的事件冒泡机制导致的。

解决方案：

使用@change事件替代@click

<uni-swipe-action-item 
    :right-options="options" 
    [@change](/user/change)="bindClick">

在事件处理函数中添加防抖

methods: {
    bindClick(value) {
        // 防止重复触发
        if (this.clickTimer) clearTimeout(this.clickTimer);
        
        this.clickTimer = setTimeout(() => {
            switch(value.index){
                case 0:
                    console.log('修改');
                    break;
                case 1:
                    console.log('删除');
                    break;
            }
        }, 50);
    }
}

检查组件版本 确保使用的uni-ui组件是最新版本，该问题在较新版本中已得到改善。
手动阻止事件冒泡（如果上述方法无效）

<uni-swipe-action-item 
    :right-options="options" 
    [@click](/user/click)="bindClick($event, true)">

bindClick(value, stop) {
    if (stop) {
        // 阻止事件冒泡逻辑
        return;
    }
    // 正常处理逻辑
}