微信小程序 向左滑动删除功能的实现

微信小程序向左滑动删除功能的实现

在微信小程序中，向左滑动删除功能常常被用到，例如在消息列表中删除某一条消息。那么如何实现呢？本篇文章将详细介绍微信小程序中实现向左滑动删除的方法。

1. 实现思路

在微信小程序中实现向左滑动删除的思路如下：

1. 在wxml中定义一个标签，用来显示列表，并且给它添加 catchtouchstart、catchtouchmove、catchtouchend 事件，用于监听手指触摸、移动和离开的事件。

2. 在手指触摸时，记录手指触摸的起始位置。

3. 在手指移动时，计算手指移动的距离并且通过样式修改标签的left值，以实现向左滑动的效果。

4. 在手指离开时，判断手指移动的距离是否超出一定的范围。如果超出，则认为是一次向左滑动删除的操作。

5. 在向左滑动删除时，通过调用微信小程序的api，删除对应的数据，并且通过样式将删除的标签隐藏或者移除。

2. 实现步骤

该向左滑动删除功能主要涉及wxml和js两个部分，我们将分别讲解。

2.1 wxml部分

首先，在wxml中，我们需要定义一个标签用来显示列表。在该标签上，我们需要绑定catchtouchstart、catchtouchmove、catchtouchend三个事件。

在手指触摸时，我们需要保存手指触摸的起始位置。在手指移动时，我们需要计算手指移动的距离，然后根据手指移动的距离动态修改该标签的left值。

在手指离开时，我们需要判断手指移动的距离是否大于一定的值，如果大于，则认为是一次向左滑动删除的操作。我们需要把这个操作传递给js文件中的函数执行。

在wxml中，代码如下：

<view class="list">

  <block wx:for="{{list}}" wx:key="{{index}}">
    <view class="item" 
      catchtouchstart="touchStart" catchtouchmove="touchMove" catchtouchend="touchEnd" 
      data-index="{{index}}" style="left:{{item.left}}px;">
      {{item.text}}
    </view>
  </block>
</view>

2.2 js部分

在js文件中，我们需要先定义一个对象，用来保存当前的滑动列表。然后，我们需要定义touchStart、touchMove、touchEnd三个函数，用来处理手指触摸、移动、离开的事件。

在touchStart函数中，我们需要记录手指触摸的起始位置。在touchMove函数中，我们需要计算手指移动的距离，并且根据距离动态修改当前标签的left值。在touchEnd函数中，我们判断手指移动的距离是否大于一定的值，如果大于，则调用removeItem函数，删除当前标签对应的数据。

在js文件中，代码如下：

Page({

  data: {
    startX: 0,
    list: [
      {text: 'item1', left: 0},
      {text: 'item2', left: 0},
      {text: 'item3', left: 0}
    ]
  },
  touchStart(e) {
    this.setData({
      startX: e.touches[0].clientX
    })
  },
  touchMove(e) {
    let index = e.currentTarget.dataset.index
    let moveX = e.touches[0].clientX
    let distance = this.data.startX - moveX
    let list = this.data.list
    if (distance >= 0 && distance <= 100) {
      list[index].left = -distance
      this.setData({
        list: list
      })
    }
  },
  touchEnd(e) {
    let index = e.currentTarget.dataset.index
    let distance = this.data.startX - e.changedTouches[0].clientX
    let list = this.data.list
    if (distance >= 50) {
      wx.showModal({
        title: '提示',
        content: '确认删除吗？',
        success: res => {
          if (res.confirm) {
            this.removeItem(index)
          } else {
            list[index].left = 0
            this.setData({
              list: list
            })
          }
        }
      })
    } else {
      list[index].left = 0
      this.setData({
        list: list
      })
    }
  },
  removeItem(index) {
    let list = this.data.list
    list.splice(index, 1)
    this.setData({
      list: list
    })
  }
})

3. 结语

以上是实现微信小程序中向左滑动删除的完整代码及思路。该功能通过监听手指触摸、移动、离开的事件，并且根据手指移动的距离动态修改标签的样式，从而实现了向左滑动删除的效果。这个功能在实际开发中还是非常实用的，希望对大家有所帮助。