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

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2017-5-11 22:48:19 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
先看效果

212445hbxyexeleeb72xjf.gif

首先是 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.   touchE: function (e) {  // touchend
  10.     const width = 150  // 定义操作列表宽度
  11.     let itemData = App.Touches.touchE(e, this.data.itemData, this.data.startX, width)
  12.     itemData && this.setData({ itemData })
  13.   },
  14.   itemDelete: function(e){  // itemDelete
  15.     let itemData = App.Touches.deleteItem(e, this.data.itemData)
  16.     itemData && this.setData({ itemData })
  17.   },
复制代码
事件函数主演也是 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.     touchE(e, dataList, startX, width) {  // touchend 更新列表数据
  7.         let list = this._resetData(dataList)
  8.         let disX = this._getEndX(e, startX)
  9.         let left = 0

  10.         if (disX < 0) {  // 判断滑动方向, (向左滑动)
  11.             // 滑动的距离大于删除宽度的一半就显示操作列表 否则不显示
  12.             Math.abs(disX) > width / 2 ? left = -width : left = 0
  13.         } else {  // 向右滑动复位
  14.             left = 0
  15.         }

  16.         list[this._getIndex(e)].left = left
  17.         return list
  18.     }

  19.     deleteItem(e, dataList) {  // 删除功能
  20.         dataList.splice(this._getIndex(e), 1)
  21.         return dataList
  22.     }
复制代码
每个函数都有注释说明, 相信都能看得懂, 就不多解释了。


项目下载地址:
游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

精彩评论1

淡蓝色的梦 发表于 2017-5-23 10:12:44 | 显示全部楼层
希望帮助
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ- Archiver-手机版-小黑屋- 浩阳天社区  

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.  蜀ICP备16032957号-1