uni-app中 uni-swipe-action 组件在 nvue 下不可用
uni-app中 uni-swipe-action 组件在 nvue 下不可用
示例代码：
<uni-swipe-action>
<!-- 基础用法 -->
<uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
<view>SwipeAction 基础使用场景</view>
</uni-swipe-action-item>
</uni-swipe-action>操作步骤：
移除index.nvue运行到真机，代码正常。复制index.vue为index.nvue到真机，代买报错无法运行
预期结果：
nvue下正常运行
实际结果：
报错，无法运行
bug描述：
代码见附件。index/index.vue运行uni-swipe-action基础用法，运行到手机后代码正常。复制一份index.nvue无法运行到真机，见控制台错误图片
| 信息类别 | 详细信息 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.4.6 |
| 手机系统 | Android |
| 手机系统版本号 | Android 12 |
| 手机厂商 | 小米 |
| 手机机型 | 至尊10 |
| 页面类型 | nvue |
| vue版本 | vue3 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
2 回复
在 uni-app 中，uni-swipe-action 组件在 nvue 环境下确实不可用。这是因为 nvue 是基于原生渲染的，而 uni-swipe-action 组件是基于 vue 的 weex 渲染引擎实现的，两者在渲染机制上存在差异，导致 uni-swipe-action 无法在 nvue 中正常工作。
解决方案
如果你在 nvue 中需要实现类似 uni-swipe-action 的滑动操作功能，可以考虑以下几种方案：
1. 使用 list 组件
nvue 中的 list 组件支持滑动操作，你可以通过自定义 cell 来实现类似 uni-swipe-action 的效果。
<template>
<list>
<cell v-for="(item, index) in list" :key="index">
<view class="item">
<text>{{ item.title }}</text>
<view class="actions">
<text @click="handleAction(index, 'delete')">删除</text>
<text @click="handleAction(index, 'edit')">编辑</text>
</view>
</view>
</cell>
</list>
</template>
<script>
export default {
data() {
return {
list: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' }
]
};
},
methods: {
handleAction(index, action) {
console.log(`Action: ${action} on item ${index}`);
}
}
};
</script>
<style scoped>
.item {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #fff;
}
.actions {
flex-direction: row;
}
.actions text {
margin-left: 10px;
color: #007AFF;
}
</style>2. 使用 scroll-view 和 touch 事件
你可以使用 scroll-view 结合 touch 事件来实现滑动操作的效果。
<template>
<scroll-view>
<view v-for="(item, index) in list" :key="index" class="item" @touchstart="handleTouchStart(index)" @touchmove="handleTouchMove(index)" @touchend="handleTouchEnd(index)">
<text>{{ item.title }}</text>
<view class="actions" :style="{ transform: `translateX(${item.offsetX}px)` }">
<text @click="handleAction(index, 'delete')">删除</text>
<text @click="handleAction(index, 'edit')">编辑</text>
</view>
</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
list: [
{ title: 'Item 1', offsetX: 0 },
{ title: 'Item 2', offsetX: 0 },
{ title: 'Item 3', offsetX: 0 }
],
startX: 0
};
},
methods: {
handleTouchStart(index) {
this.startX = event.touches[0].clientX;
},
handleTouchMove(index) {
const currentX = event.touches[0].clientX;
const offsetX = currentX - this.startX;
this.list[index].offsetX = offsetX;
},
handleTouchEnd(index) {
this.list[index].offsetX = 0;
},
handleAction(index, action) {
console.log(`Action: ${action} on item ${index}`);
}
}
};
</script>
<style scoped>
.item {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #fff;
position: relative;
}
.actions {
position: absolute;
right: 0;
top: 0;
bottom: 0;
flex-direction: row;
align-items: center;
background-color: #f0f0f0;
padding: 0 10px;
}
.actions text {
margin-left: 10px;
color: #007AFF;
}
</style>