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

摘要： 前言：實現完整的列表左滑刪除功能。 GitHub： https://github.com/Ewall1106/miniProgramDemo 1、列表渲染 首先我們初始化一個 list 列表併為其新增資料，這個列表有兩個值分別為標題文字 title 和初始的偏移量 x ：...

前言：實現完整的列表左滑刪除功能。

GitHub： ofollow,noindex">https://github.com/Ewall1106/miniProgramDemo

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 < -46) {
this.list[idx].x = -92;
this.setData({
list: this.list
});
} else {
this.list[idx].x = 0;
this.setData({
list: this.list
});
}
}

• 上面幾行程式碼很重要，解決了這麼一個問題：

  列表渲染的問題，由於js的限制，不能檢測到陣列中值的變化，所以我們先改變了 list 陣列項中的值，然後在用 this.setData() 重新賦值一遍，關於這個問題，可以看看vue中關於列表渲染的 注意事項 ，原理是一樣的： https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

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

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

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

3、小結

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