当前位置：首页 > news >正文

实现Taro小程序+nut-ui左滑删除效果

news 2025/6/27 9:41:47

Taro小程序开发中，使用nut-ui组件，实现左滑删除卡片效果（自定义删除按钮样式）
在这里插入图片描述

html代码部分

<nut-swipe class="carBox" v-for="(item, index) in carList" :key="item" :ref="(el) => setSwipeRef(el, index)"@open="() => handleSwipeOpen(index)" @close="handleSwipeClose"><view>自定义卡片内容区域</view><template #right><nut-button shape="square" class="delBtn" color="#137DF5" @click="handleSwipeDelete(item, index)"><slot>删除</slot></nut-button></template></nut-swipe>.carBox {width: calc(100% - 40px);border-radius: 18px;background-color: #fff;margin: 24px 41px;
}
.delBtn {width: 160px;height: 100%;font-size: 36px;color: #FFFFFF;line-height: 52px;border-radius: 0px 18px 18px 0px;
}

ts部分

// 使用Map存储引用
const swipeRefs = ref(new Map<number, any>())
const swipingIndex = ref<number | null>(null)const handleSwipeOpen = (index: number) => {swipingIndex.value = index
}const handleSwipeClose = () => {swipingIndex.value = null
}const setSwipeRef = (el: any, index: number) => {if (el) {swipeRefs.value.set(index, el)} else {swipeRefs.value.delete(index)}
}const handleSwipeDelete = async (item, index) => {const swipeInstance = swipeRefs.value.get(index)swipeInstance?.close()await handleDeleteClick(item) // 删除操作-> 调用删除接口（函数自定义）// 关闭所有左滑面板swipeRefs.value.forEach(swipe => {swipe?.close()})
}