- 发布：2025-07-25 10:15
- 更新：2025-07-28 10:24
- 阅读：270
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX类型： 正式
HBuilderX版本号： 4.66
手机系统： 全部
手机厂商： 华为
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
正常官方案例代码
<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>
正常官方案例代码
<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位置。
实际结果：
在右侧按钮区域滑动，停留在touchend位置
在右侧按钮区域滑动，停留在touchend位置
bug描述：
左滑展开右侧按钮区域后，点击按钮区域滑动时，不会自动收起，会停留在touchend位置。
山葵蛋卷 (作者) - 爱吃山葵蛋卷
<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>
山葵蛋卷 (作者)
没有设置其他的，代码就是上边的代码。我把滑动阈值设置为1试试？
2025-07-25 14:08
山葵蛋卷 (作者)
感觉像是按钮的touchmove事件阻塞了整行的touchmove
2025-07-25 14:27
DCloud_UNI_yuhe
回复 山葵蛋卷: 你提供一下一个完整的可以运行的代码吧
2025-07-25 19:09