前言：實現(xiàn)完整的列表左滑刪除功能。
GitHub：https://github.com/Ewall1106/miniProgramDemo
1监右、列表渲染
首先我們初始化一個list列表并為其添加數(shù)據(jù)庶灿，這個列表有兩個值分別為標題文字title和初始的偏移量x：
list: [
{
x: 0,
title: '這里是內容區(qū)域0'
},
{
x: 0,
title: '這里是內容區(qū)域1'
},
{
x: 0,
title: '這里是內容區(qū)域2'
},
{
x: 0,
title: '這里是內容區(qū)域3'
}
],
// 記錄當前偏移量
currentX: 0
然后我們在頁面上循環(huán)渲染這個列表饲鄙，這里就不多說了勺届。
2廊散、事件處理
（1）首先我們要給touchend事件傳遞一個參數(shù)歹垫，參數(shù)值為當前用戶觸摸列表的索引值剥汤，讓我們可以知道，到底用戶是觸摸了哪個列表項排惨。
（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的限制若贮，不能檢測到數(shù)組中值的變化省有，所以我們先改變了list數(shù)組項中的值，然后在用this.setData()重新賦值一遍谴麦，關于這個問題蠢沿，可以看看vue中關于列表渲染的注意事項，原理是一樣的：https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
（3）最后就是刪除功能的實現(xiàn)
同理我們也需要獲取用戶點擊刪除按鈕的索引值匾效，然后進行刪除舷蟀，很簡單不多說，看代碼：
handleDelete(idx) {
this.list.splice(idx, 1);
this.setData({
list: this.list
});
}
3、小結
這就是我們實現(xiàn)左滑刪除效果的全部內容了野宜，利用了小程序的movable組件實現(xiàn)了大部分的功能扫步，關于js主要是在處理列表渲染的時候，這里是個坑匈子，其他就沒什么難點了河胎，看看最后的效果圖吧：
最終效果
