小程序开发之左滑删除页面「代码示例」

1. 左滑删除页面介绍

在移动端应用中，如果我们需要删除列表中的某一项，通常可以通过左滑操作来实现。左滑操作会出现一个弹出层，显示删除按钮，用户可以通过点击删除按钮触发删除操作。我们今天要介绍的是，在小程序中如何实现一个左滑删除页面。

2. 左滑删除页面实现

2.1. 页面结构

首先，我们需要在小程序中创建一个页面来实现左滑删除功能。该页面包含一组需要删除的列表项。我们可以使用scroll-view组件来实现可滚动的列表。每一项在scroll-view中使用view组件来包裹，如下所示：

<scroll-view scroll-y="true">
  <view class="list-item" wx:for="{{list}}" wx:key="{{item.id}}">
    <view class="item-content">
      <image src="{{item.imageUrl}}" class="item-image">
      <text class="item-title">{{item.title}}</text>
    </view>
    <view class="delete-btn">删除</view>
  </view>
</scroll-view>

可以看到，每一项的内容包含一个图片和一个标题。我们还在每一项后面添加了一个删除按钮，当用户左滑该项时会出现。我们设置了scroll-view的scroll-y属性为true，表示可以纵向滚动。

2.2. 实现左滑效果

接下来，我们需要为每一项实现左滑效果。首先，我们需要为每一项绑定touchstart、touchmove和touchend事件。当用户开始触摸某一项时，我们记录下触摸时的坐标；当用户左滑该项时，我们计算出该项左移的距离，并动态改变该项的位置，使其出现在界面上。

我们使用移动端开发常用的requestAnimationFrame函数来实现动画效果，具体代码如下：

touchstart(e) {
  this.startX = e.changedTouches[0].pageX
  this.startY = e.changedTouches[0].pageY
  this.setData({
    translateX: 0
  })
},
touchmove(e) {
  const moveX = e.changedTouches[0].pageX
  const moveY = e.changedTouches[0].pageY
  const diffX = moveX - this.startX
  const diffY = moveY - this.startY
  if (Math.abs(diffX) > Math.abs(diffY) && diffX < -10) {
    this.moveX = diffX
    this.setData({
      translateX: diffX
    })
  }
},
touchend(e) {
  if (this.moveX < -60) {
    this.setData({
      translateX: '-168rpx'
    })
  } else {
    this.setData({
      translateX: 0
    })
  }
  this.moveX = 0
}

可以看到，我们在touchstart事件中记录下开始触摸时的坐标，在touchmove事件中计算出手指在横向和纵向上分别移动的距离，如果横向移动距离大于纵向移动距离，并且向左移动的距离超过了10个像素，则通过改变translateX的值来实现动态改变该项的位置。在touchend事件中，如果向左移动的距离超过60个像素，则我们认为用户已经完成左滑操作，并将该项左移168rpx，同时显示出删除按钮。

2.3. 实现删除功能

最后，我们需要为删除按钮绑定tap事件，当用户点击删除按钮时，我们应该将该项从列表中删除。具体代码如下：

deleteItem(e) {
  const index = e.currentTarget.dataset.index
  const list = this.data.list
  list.splice(index, 1)
  this.setData({
    list: list
  })
}

我们通过获取点击删除按钮时的index值，然后使用JS的splice函数将该项从列表中删除。

3. 左滑删除页面总结

通过本文的介绍，我们了解了如何在小程序中实现一个左滑删除页面。该页面包含一个可滚动的列表，每一项可以左滑出现删除按钮，用户可以通过点击删除按钮来删除该项。通过本文的代码示例，我们可以掌握实现左滑操作和删除功能的核心思路，并能够在实际项目中灵活应用。