uni-app uni-swipe-action H5下能正常滑动并且触发click事件 但是APP端不行

uni-app uni-swipe-action H5下能正常滑动并且触发click事件 但是APP端不行

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Windows  | 1809   | CLI          |

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：Android

手机系统版本号：Android 7.0

手机厂商：模拟器

手机机型：PIXEL 2 XL

页面类型：vue

打包方式：云端

CLI版本号：3.1.2

示例代码：
```javascript
<!-- 按组使用 -->  
<uni-swipe-action>  
    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">  
        <view >item1</view>  
    </uni-swipe-action-item>  
    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">  
        <view>item2</view>  
    </uni-swipe-action-item>  
    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">  
        <view>item3</view>  
    </uni-swipe-action-item>  
</uni-swipe-action>  
export default {  
  data(){  
    return {  
      options:[  
        {  
            text: '取消',  
            style: {  
                backgroundColor: '#007aff'  
            }  
        }, {  
            text: '确认',  
            style: {  
                backgroundColor: '#dd524d'  
            }  
        }  
      ]  
    }  
  },  
  methods:{  
    onClick(e){  
      console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')  
    },  
    swipeChange(e,index){  
      console.log('当前状态：'+ e+'，下标：' + index)  
    }  
  }  
}

操作步骤：

  • 同上

预期结果：

  • 正常输出

实际结果：

  • 报错

bug描述：

  • uni-ui版本1.3.1 一直报截图的错误,用的示例代码


更多关于uni-app uni-swipe-action H5下能正常滑动并且触发click事件 但是APP端不行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

更新组件，问题已经修复

更多关于uni-app uni-swipe-action H5下能正常滑动并且触发click事件 但是APP端不行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的uni-swipe-action在App端的事件处理问题。主要原因是H5和App端的事件机制差异导致的。

问题分析：

  1. 在H5环境下，touch事件和click事件可以正常共存
  2. 在App端，滑动操作会阻止click事件的触发
  3. 从错误截图看，事件处理函数可能未正确定义

解决方案：

  1. 检查事件函数定义： 确保bindClick方法在methods中正确定义：
methods: {
  bindClick(e) {
    console.log('按钮点击事件', e)
  },
  // ...其他方法
}
  1. 使用@click事件替代： 将[@click](/user/click)改为监听按钮的点击事件：
<uni-swipe-action-item 
  :right-options="options" 
  [@click](/user/click)="onSwipeClick"
  @change="swipeChange($event, index)">
  1. 更新uni-ui版本： 1.3.1版本可能存在兼容性问题，建议升级到最新版本：
npm update [@dcloudio](/user/dcloudio)/uni-ui
回到顶部