微信小程序-仿微信， QQ 列表左滑删除功能

先看效果

首先是 wxml 里面绑定事件

1. <view class="item-wrapper">
   
2.     <view class="item-list" wx:for="{{itemData}}" wx:for-item="item" wx:for-index="index" wx:key="that">
   
3.         <view class="item-info" data-index="{{index}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="left:{{item.left + 'rpx'}}">
   
4.             <image class="info-img" src="{{item.img}}"></image>
   
5.             <view class="info-wrapper">
   
6.                 <view class="info-desc">
   
7.                     <view class="name">{{item.name}}</view>
   
8.                     <view class="time">{{item.time}}</view>
   
9.                 </view>
   
10.                 <view class="info-content">{{item.info}}</view>
    
11.             </view>
    
12.         </view>
    
13.         <view class="item-oper">
    
14.             <view class="oper-delete" bindtap="itemDelete" data-index="{{index}}">删除</view>
    
15.         </view>
    
16.     </view>
    
17. </view>

复制代码

主要就是用的小程序的 touch 事件来进行处理
样式就不说了， 可以自己写， 不想写的同学也可以拿来直接用。

然后就是事件的处理函数了

1. touchS: function (e) {  // touchstart
   
2.     let startX = App.Touches.getClientX(e)
   
3.     startX && this.setData({ startX })
   
4.   },
   
5.   touchM: function (e) {  // touchmove
   
6.     let itemData = App.Touches.touchM(e, this.data.itemData, this.data.startX)
   
7.     itemData && this.setData({ itemData })
   
8. 
   
9.   },
   
10.   touchE: function (e) {  // touchend
    
11.     const width = 150  // 定义操作列表宽度
    
12.     let itemData = App.Touches.touchE(e, this.data.itemData, this.data.startX, width)
    
13.     itemData && this.setData({ itemData })
    
14.   },
    
15.   itemDelete: function(e){  // itemDelete
    
16.     let itemData = App.Touches.deleteItem(e, this.data.itemData)
    
17.     itemData && this.setData({ itemData })
    
18.   },

复制代码

事件函数主演也是 touch 的三个事件还有删除事件， 每个事件的核心是更新数据， 也就是 setData()
数据处理函数

数据处理的函数我单独拿了出来， 这样有利于复用。 放在 utils 文件夹下的 Touches.js 文件里面

1. touchM(e, dataList, startX) {  // touchmove 过程中更新列表数据
   
2.         let list = this._resetData(dataList)
   
3.         list[this._getIndex(e)].left = this._getMoveX(e, startX)
   
4.         return list
   
5.     }
   
6. 
   
7.     touchE(e, dataList, startX, width) {  // touchend 更新列表数据
   
8.         let list = this._resetData(dataList)
   
9.         let disX = this._getEndX(e, startX)
   
10.         let left = 0
    
11. 
    
12.         if (disX < 0) {  // 判断滑动方向， （向左滑动）
    
13.             // 滑动的距离大于删除宽度的一半就显示操作列表 否则不显示
    
14.             Math.abs(disX) > width / 2 ? left = -width : left = 0
    
15.         } else {  // 向右滑动复位
    
16.             left = 0
    
17.         }
    
18. 
    
19.         list[this._getIndex(e)].left = left
    
20.         return list
    
21.     }
    
22. 
    
23.     deleteItem(e, dataList) {  // 删除功能
    
24.         dataList.splice(this._getIndex(e), 1)
    
25.         return dataList
    
26.     }

复制代码

每个函数都有注释说明， 相信都能看得懂， 就不多解释了。

项目下载地址：

游客，如果您要查看本帖隐藏内容请回复

希望帮助