uni-app uni-swipe-action组件Bug反馈
uni-app uni-swipe-action组件Bug反馈
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 14.5 (23F79) | HBuilderX |
示例代码：
<list style="margin-top: 0;margin-left: 15;flex: 1;" show-scrollbar="false">
<cell v-for="(item,index) in peers">
<uni-swipe-action>
<uni-swipe-action-item :autoClose="false" :show="state.activeOpen==index?'right':'none'"
<p>right-options="actions" @click="swipActionClick" @change="(e)=>swipeActionChange(e,index)">
<view style="flex-direction: row; margin: 10 0;"
```
<view>
</view>
</uni-swipe-action-item>
</uni-swipe-action>
</cell>
</list>
操作步骤：
- 页面展示后，滚动到底部。左划最后一个item
预期结果：
- 正常展开，展开后可以收回
实际结果：
- 展开不正常，也不能收回
bug描述：
- uni-swipe-action 作为 list 的 cell 内容时，初始可见展示范围的 item 可以正常操作；滚动到底部，新展示的 item，滑动无效
6 回复
<template>
<list style="margin-top: 0;margin-left: 15;flex: 1; background-color: white;" show-scrollbar="false">
<cell v-for="(item) in rows">
<uni-swipe-action>
<uni-swipe-action-item :autoClose="false" :right-options="actions">
<view style="height: 50;padding: 10">
<text style="color: gray;font-size: 14;opacity: 0.6;">{{item}} 哈哈哈，你好呀呀呀呀</text>
</view>
</uni-swipe-action-item>
</uni-swipe-action>
</cell>
</list>
</template>
<script>
export default {
data() {
return {
rows: [],
actions: [{
text: '删除',
style: {
backgroundColor: 'red'
}
}]
}
},
created() {
for (let i = 0; i < 100; i++) {
this.rows.push('row ' + i)
}
}
}
</script>
<style scoped>
</style>
注意：上面的正常，滚动到下面的，就不正常了
针对您提到的uni-app中uni-swipe-action组件的Bug反馈，作为一个IT专家，我理解这可能会影响到开发效率和用户体验。虽然无法直接修复官方组件的Bug，但我可以提供一些可能的解决方案或替代实现方式，帮助您绕过这些问题。以下是一些代码案例，旨在展示如何通过自定义逻辑来模拟uni-swipe-action的功能，或者在可能的情况下修复已知问题。
1. 自定义滑动操作组件
如果uni-swipe-action组件存在Bug，您可以考虑使用CSS动画和JavaScript事件监听来创建一个自定义的滑动操作组件。以下是一个简化的示例：
<template>
<view class="container">
<view class="swipe-item" @touchstart="startTouch" @touchmove="moveTouch" @touchend="endTouch">
<view class="front">Item Front</view>
<view class="back" v-if="isSwiped">Actions</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
startX: 0,
isSwiped: false,
};
},
methods: {
startTouch(e) {
this.startX = e.touches[0].clientX;
},
moveTouch(e) {
const currentX = e.touches[0].clientX;
if (currentX - this.startX > 50) { // Threshold for swipe
this.isSwiped = true;
}
},
endTouch() {
// Reset swipe state after a delay or on specific action
setTimeout(() => {
this.isSwiped = false;
}, 3000); // Example delay
},
},
};
</script>
<style>
.container {
overflow: hidden;
}
.swipe-item {
position: relative;
width: 100%;
height: 100px;
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.3s;
}
.back {
transform: translateX(100%);
}
.is-swiped .back {
transform: translateX(0);
}
.is-swiped .front {
transform: translateX(-100%);
}
</style>
注意：上述代码是一个基本框架，需要根据实际需求调整动画效果、触发条件及样式。此外，由于缺少v-if="isSwiped"直接控制类名的机制，您可能需要使用计算属性或绑定样式来实现最终的动画效果。
2. 报告并跟踪官方Bug
同时，建议您向uni-app的官方支持或社区论坛报告遇到的Bug，并提供详细的复现步骤和可能的错误日志。官方团队通常会跟踪并修复这些问题，确保组件的稳定性和可用性。
