前言：實(shí)現(xiàn)完整的列表左滑刪除功能。
GitHub：https://github.com/Ewall1106/miniProgramDemo

1、列表渲染

首先我們初始化一個(gè)list列表并為其添加數(shù)據(jù)，這個(gè)列表有兩個(gè)值分別為標(biāo)題文字title和初始的偏移量x：

list: [
  {
    x: 0,
    title: '這里是內(nèi)容區(qū)域0'
  },
  {
    x: 0,
    title: '這里是內(nèi)容區(qū)域1'
  },
  {
    x: 0,
    title: '這里是內(nèi)容區(qū)域2'
  },
  {
    x: 0,
    title: '這里是內(nèi)容區(qū)域3'
  }
],
// 記錄當(dāng)前偏移量
currentX: 0

然后我們在頁面上循環(huán)渲染這個(gè)列表，這里就不多說了。

2、事件處理

（1）首先我們要給touchend事件傳遞一個(gè)參數(shù)，參數(shù)值為當(dāng)前用戶觸摸列表的索引值，讓我們可以知道，到底用戶是觸摸了哪個(gè)列表項(xiàng)。
（2）然后我們要在觸摸事件結(jié)束的時(shí)候判斷偏移量的位置

handleTouchend(idx, e) {
  if (this.currentX < -46) {
    this.list[idx].x = -92;
    this.setData({
      list: this.list
    });
  } else {
    this.list[idx].x = 0;
    this.setData({
      list: this.list
    });
  }
}

• 上面幾行代碼很重要，解決了這么一個(gè)問題：
  列表渲染的問題，由于js的限制，不能檢測到數(shù)組中值的變化，所以我們先改變了list數(shù)組項(xiàng)中的值，然后在用this.setData()重新賦值一遍，關(guān)于這個(gè)問題，可以看看vue中關(guān)于列表渲染的注意事項(xiàng)，原理是一樣的：https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

（3）最后就是刪除功能的實(shí)現(xiàn)

同理我們也需要獲取用戶點(diǎn)擊刪除按鈕的索引值，然后進(jìn)行刪除，很簡單不多說，看代碼：

handleDelete(idx) {
  this.list.splice(idx, 1);
  this.setData({
    list: this.list
  });
}

3、小結(jié)

這就是我們實(shí)現(xiàn)左滑刪除效果的全部內(nèi)容了，利用了小程序的movable組件實(shí)現(xiàn)了大部分的功能，關(guān)于js主要是在處理列表渲染的時(shí)候，這里是個(gè)坑，其他就沒什么難點(diǎn)了，看看最后的效果圖吧：

最終效果