小程式 — 實現左滑刪除效果（列表）③

1、列表渲染

首先我們初始化一個list列表併為其新增資料，這個列表有兩個值分別為標題文字title和初始的偏移量x：

list: [
  {
    x: 0,
    title: '這裡是內容區域0'
  },
  {
    x: 0,
    title: '這裡是內容區域1'
  },
  {
    x: 0,
    title: '這裡是內容區域2'
  },
  {
    x: 0,
    title: '這裡是內容區域3'
  }
],// 記錄當前偏移量currentX: 0

然後我們在頁面上迴圈渲染這個列表，這裡就不多說了。

2、事件處理

（1）首先我們要給touchend事件傳遞一個引數，引數值為當前使用者觸控列表的索引值，讓我們可以知道，到底使用者是觸控了哪個列表項。
（2）然後我們要在觸控事件結束的時候判斷偏移量的位置

handleTouchend(idx, e) {  if (this.currentX 

• 上面幾行程式碼很重要，解決了這麼一個問題：
  列表渲染的問題，由於js的限制，不能檢測到陣列中值的變化，所以我們先改變了list陣列項中的值，然後在用this.setData()重新賦值一遍，關於這個問題，可以看看vue中關於列表渲染的注意事項，原理是一樣的：

（3）最後就是刪除功能的實現

同理我們也需要獲取使用者點選刪除按鈕的索引值，然後進行刪除，很簡單不多說，看程式碼：

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

3、小結

這就是我們實現左滑刪除效果的全部內容了，利用了小程式的movable元件實現了大部分的功能，關於js主要是在處理列表渲染的時候，這裡是個坑，其他就沒什麼難點了，看看最後的效果圖吧：

最終效果

作者：Ewall_
連結：