uni-app uni-swipe-action滑动右侧按钮区域后不会自动收回

uni-app uni-swipe-action滑动右侧按钮区域后不会自动收回

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：正式
HBuilderX版本号：4.66
手机系统：全部
手机厂商：华为
页面类型：vue
vue版本：vue2
打包方式：云端

测试过的手机：phone6s,12,13,华为，荣耀

示例代码：

正常官方案例代码
<uni-swipe-action ref="chatSwipeRef">
<uni-swipe-action-item :right-options="item.options" :disabled="item.disabled" v-for="(item,index) in list" :key="item.id" @click="handleChatActions">
<view >{{item}}</view>
</uni-swipe-action-item>
</uni-swipe-action>

操作步骤：

正常官方案例代码

预期结果：

在右侧按钮区域滑动，手指离开时候 也能自动收起或打开，而不是停留在touchend位置。

实际结果：

在右侧按钮区域滑动，停留在touchend位置

bug描述：

左滑展开右侧按钮区域后，点击按钮区域滑动时，不会自动收起，会停留在touchend位置。

更多关于uni-app uni-swipe-action滑动右侧按钮区域后不会自动收回的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

是不是设置 threshold 阈值的问题？

更多关于uni-app uni-swipe-action滑动右侧按钮区域后不会自动收回的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有设置其他的，代码就是上边的代码。我把滑动阈值设置为1试试？

感觉像是按钮的touchmove事件阻塞了整行的touchmove

回复 山葵蛋卷: 你提供一下一个完整的可以运行的代码吧

<template> <view class="container"> <uni-swipe-action ref="swipeAction"> <uni-swipe-action-item v-for="(item, index) in swipeList" :right-options="item.options" :key="item.id" @change="swipeChange($event, index)" @click="swipeClick($event, index)" > <view class="content-box"> <text class="content-text">{{ item.content }}</text> </view> </uni-swipe-action-item> </uni-swipe-action> </view> </template> <script> export default { components: {}, data() { return { swipeList: [{ options: [{ text: '添加', style: { backgroundColor: '#F56C6C' } }], id: 0, content: '左滑点击添加新增一条数据' }, { id: 1, options: [{ text: '置顶' }, { text: '删除', style: { backgroundColor: 'rgb(255,58,49)' } } ], content: 'item222222222222' }, { id: 2, options: [{ text: '置顶' }, { text: '标记为已读', style: { backgroundColor: 'rgb(254,156,1)' } }, { text: '删除', style: { backgroundColor: 'rgb(255,58,49)' } } ], content: 'item3333333333' } ] }; }, onReady() { uni.$on('update',res=>{ console.log(111); this.swipeClick({ content:{ text:'添加' } }) }) }, methods: { swipeChange(e, index) { console.log('返回：', e); console.log('当前索引：', index); }, swipeClick(e, index) { let { content } = e; if (content.text === '删除') { uni.showModal({ title: '提示', content: '是否删除', success: res => { if (res.confirm) { this.swipeList.splice(index, 1); } else if (res.cancel) { console.log('用户点击取消'); } } }); } else if (content.text === '添加') { if (this.swipeList.length < 10) { this.swipeList.push({ id: new Date().getTime(), options: [{ text: '置顶' }, { text: '标记为已读', style: { backgroundColor: 'rgb(254,156,1)' } }, { text: '删除', style: { backgroundColor: 'rgb(255,58,49)' } } ], content: '新增' + new Date().getTime() }); uni.showToast({ title: `添加了一条数据`, icon: 'none' }); } else { uni.showToast({ title: `最多添加十条数据`, icon: 'none' }); } } else { uni.showToast({ title: `点击了${e.content.text}按钮`, icon: 'none' }); } } } }; </script> <style lang="scss" scoped> .content-box { flex: 1; /* #ifdef APP-NVUE */ justify-content: center; /* #endif */ height: 44px; line-height: 44px; padding: 0 15px; position: relative; background-color: #fff; border-bottom-color: #f5f5f5; border-bottom-width: 1px; border-bottom-style: solid; } .content-text { font-size: 15px; } .example-body { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; justify-content: center; padding: 10px 0; background-color: #fff; } .button { border-color: #e5e5e5; border-style: solid; border-width: 1px; padding: 4px 8px; border-radius: 4px; } .button-text { font-size: 15px; } .slot-button { /* #ifndef APP-NVUE */ display: flex; height: 100%; /* #endif */ flex: 1; flex-direction: row; justify-content: center; align-items: center; padding: 0 20px; background-color: #ff5a5f; } .slot-button-text { color: #ffffff; font-size: 14px; } </style>

点击按钮区域左右拖动，会停住

看代码，看起来按钮区域的处理逻辑是与滑动区域处理逻辑不同的，测试各端都是这个效果

这个问题是由于uni-swipe-action组件在滑动右侧按钮区域时的默认行为导致的。根据官方文档，该组件默认只支持点击按钮触发关闭，滑动操作需要手动处理。

解决方案是在[@change](/user/change)事件中监听滑动状态，通过ref手动控制组件的关闭：

// 在data中定义
data() {
  return {
    currentSwipeIndex: -1
  }
},

// 方法
methods: {
  handleChange(e) {
    this.currentSwipeIndex = e.detail.index
  },
  
  handleChatActions(e) {
    // 处理按钮点击
    console.log(e)
    
    // 点击后关闭滑动区域
    this.$refs.chatSwipeRef.close()
    this.currentSwipeIndex = -1
  }
}

模板中需要添加[@change](/user/change)事件监听：

<uni-swipe-action 
  ref="chatSwipeRef"
  [@change](/user/change)="handleChange">
  <uni-swipe-action-item 
    :right-options="item.options" 
    :disabled="item.disabled" 
    v-for="(item,index) in list" 
    :key="item.id" 
    @click="handleChatActions">
    <view>{{item}}</view>
  </uni-swipe-action-item>
</uni-swipe-action>
回到顶部