随着智能手机的普及和移动互联网的发展，越来越多的人开始使用手机进行各种操作，其中包括使用各种应用程序。在应用程序中，我们通常会遇到一些列表数据，例如通讯录、消息列表、订单列表等等。这些列表经常需要对数据进行操作，比如查看详情、标记已读、删除等等。其中，删除操作是比较常见的一种操作，本篇文章将聚焦于如何在uniapp中实现一个左滑出现删除按钮的效果。
UniApp是一款跨平台开发框架，可以在同一个代码基础上，同时生成多个运行平台（包括iOS、Android、H5、小程序、快应用等）的应用程序。这使得开发者无需为每个平台单独编写代码，大大提高了开发效率，降低了开发成本。本文的示例代码将使用UniApp开发框架中的Vue.js部分作为基础。
一、实现思路
实现左滑出现删除按钮的效果，一般的做法是在列表项中添加一个可滑动的区域，当用户向左滑动该区域时，显示删除按钮。为了保证同时支持多个平台，我们需要考虑在移动设备上的触摸操作和在PC端的鼠标操作。基于此，我们需要实现以下逻辑：
- 滑动操作：监听用户操作，判断用户是否在目标区域内进行了滑动操作。
- 操作区域：需要在列表项中添加一个可滑动的区域。
- 显示删除按钮：当用户在目标区域内向左滑动时，显示删除按钮。
- 隐藏删除按钮：当用户在目标区域内向右滑动时，隐藏删除按钮。
- 点击删除按钮：当用户点击删除按钮时，触发删除操作。
二、实现过程
- 创建列表页面和列表项组件
首先我们需要创建一个列表页面和一个列表项组件，这里我们使用uni-ui框架中的list组件和list-item组件作为基础，以便实现一些基础的样式和布局。具体代码如下：
<!-- list.vue -->
<template>
<view>
<list>
<list-item
v-for="(item, index) in list"
:key="index"
:data-index="index"
:class="item.active ? 'item-active' : ''"
>
<view
class="item-content"
@touchstart="onTouchStart(index, $event)"
@touchmove="onTouchMove(index, $event)"
@touchend="onTouchEnd(index, $event)"
@mousedown="onMouseDown(index, $event)"
@mousemove="onMouseMove(index, $event)"
@mouseup="onMouseUp(index, $event)"
>
<view class="item-title">{{item.title}}</view>
<view class="item-delete" v-show="item.active" @click="onDeleteItem(index)">删除</view>
</view>
</list-item>
</list>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ title: '列表项1', active: false },
{ title: '列表项2', active: false },
{ title: '列表项3', active: false },
{ title: '列表项4', active: false },
{ title: '列表项5', active: false },
],
// 记录当前操作列表项的索引、起始滑动位置、当前滑动位置等信息
currentIndex: -1,
startX: 0,
startY: 0,
moveX: 0,
moveY: 0,
};
},
methods: {
onTouchStart(index, event) {
this.handleTouchStart(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
},
onTouchMove(index, event) {
this.handleTouchMove(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
},
onTouchEnd(index, event) {
this.handleTouchEnd(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
},
onMouseDown(index, event) {
this.handleTouchStart(index, event.pageX, event.pageY);
},
onMouseMove(index, event) {
this.handleTouchMove(index, event.pageX, event.pageY);
},
onMouseUp(index, event) {
this.handleTouchEnd(index, event.pageX, event.pageY);
},
handleTouchStart(index, x, y) {
if (this.currentIndex !== -1) {
return;
}
this.currentIndex = index;
this.startX = x;
this.startY = y;
},
handleTouchMove(index, x, y) {
if (this.currentIndex !== index) {
return;
}
this.moveX = x;
this.moveY = y;
const deltaX = this.moveX - this.startX;
const deltaY = this.moveY - this.startY;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX < 0) {
this.list[index].active = true;
} else {
this.list[index].active = false;
}
}
},
handleTouchEnd(index, x, y) {
if (this.currentIndex !== index) {
return;
}
this.currentIndex = -1;
this.moveX = x;
this.moveY = y;
const deltaX = this.moveX - this.startX;
const deltaY = this.moveY - this.startY;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX < 0) {
this.list[index].active = true;
} else {
this.list[index].active = false;
}
}
},
onDeleteItem(index) {
this.list.splice(index, 1);
},
},
};
</script>
<style lang="scss">
.item-active .item-content {
transform: translateX(-60px);
}
.item-content {
position: relative;
height: 60px;
padding: 0 20px;
line-height: 60px;
background-color: #fff;
border-bottom: 1px solid #eee;
overflow: hidden;
.item-delete {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 0 20px;
line-height: 60px;
background-color: #f00;
color: #fff;
font-size: 18px;
}
}
</style>这里我们在列表项组件的item-content中添加了一个滑动事件监听和一个删除按钮，通过在数据中添加一个active字段来控制显示和隐藏删除按钮。在样式中我们通过transform属性实现左滑效果，并通过overflow:hidden属性隐藏删除按钮。
- 监听滑动事件
我们需要监听触摸事件实现滑动操作，代码中使用了单点触摸（touch事件）和鼠标事件（mousedown、mousemove、mouseup事件）监听用户滑动操作。具体实现细节可参考上述代码。
- 控制删除按钮的显示和隐藏
当用户在目标区域内向左滑动时，我们需要显示删除按钮；当用户在目标区域内向右滑动时，我们需要隐藏删除按钮。这里我们通过添加active字段实现删除按钮的控制。当用户向左滑动时，我们将active字段置为true，反之则置为false。
- 点击删除按钮触发删除操作
当用户点击删除按钮时，我们需要触发删除操作。这里我们通过Vue.js组件实例的splice方法从数据中删除当前项，具体实现可参考示例代码中的onDeleteItem方法。
三、总结
至此，我们已经完成了在UniApp中实现一个左滑出现删除按钮的效果。通过实现滑动事件、控制删除按钮的显示和隐藏、以及点击删除按钮触发删除操作，我们可以在列表数据中方便地添加删除操作。
值得注意的是，在实际开发中，我们可能需要满足更多的需求，例如在删除操作前进行询问、支持多选删除等。在此基础上，我们可以根据实际需求进行更多的扩展和优化，以提升应用程序的用户体验。
