微信小程序仿微信、QQ 向左滑動(dòng)刪除操作
發(fā)布時(shí)間：2018-01-06 11:24 所屬欄目：小程序開(kāi)發(fā)教程
首先看下頁(yè)面效果：本人比較懶， 刪除動(dòng)作有點(diǎn)太生硬， 實(shí)在看不慣的同學(xué)可以加個(gè)動(dòng)畫(huà)上去。 OK 下面來(lái)看代碼首先是 wxml 里面綁定事件 view class="item-wrapper" view class="item-list" wx:for="{{itemData}}" wx ...
本人比較懶， 刪除動(dòng)作有點(diǎn)太生硬， 實(shí)在看不慣的同學(xué)可以加個(gè)動(dòng)畫(huà)上去。
OK 下面來(lái)看代碼
首先是 wxml 里面綁定事件
<view class="item-wrapper">
<view class="item-list" wx:for="{{itemData}}" wx:for-item="item" wx:for-index="index" wx:key="that">
<view class="item-info" data-index="{{index}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="left:{{item.left + 'rpx'}}">
<image class="info-img" src="{{item.img}}"></image>
<view class="info-wrapper">
<view class="info-desc">
<view class="name">{{item.name}}</view>
<view class="time">{{item.time}}</view>
</view>
<view class="info-content">{{item.info}}</view>
</view>
</view>
<view class="item-oper">
<view class="oper-delete" bindtap="itemDelete" data-index="{{index}}">刪除</view>
</view>
</view>
</view>
主要就是用的小程序的 touch 事件來(lái)進(jìn)行處理
樣式就不說(shuō)了， 可以自己寫(xiě)， 不想寫(xiě)的同學(xué)也可以拿來(lái)直接用。
然后就是事件的處理函數(shù)了
touchS: function (e) { // touchstart
let startX = App.Touches.getClientX(e)
startX && this.setData({ startX })
},
touchM: function (e) { // touchmove
let itemData = App.Touches.touchM(e, this.data.itemData, this.data.startX)
itemData && this.setData({ itemData })
},
touchE: function (e) { // touchend
const width = 150 // 定義操作列表寬度
let itemData = App.Touches.touchE(e, this.data.itemData, this.data.startX, width)
itemData && this.setData({ itemData })
},
itemDelete: function(e){ // itemDelete
let itemData = App.Touches.deleteItem(e, this.data.itemData)
itemData && this.setData({ itemData })
},
事件函數(shù)主演也是 touch 的三個(gè)事件還有刪除事件， 每個(gè)事件的核心是更新數(shù)據(jù)， 也就是 setData()
數(shù)據(jù)處理函數(shù)
數(shù)據(jù)處理的函數(shù)我單獨(dú)拿了出來(lái)， 這樣有利于復(fù)用。 放在 utils 文件夾下的 Touches.js 文件里面
touchM(e, dataList, startX) { // touchmove 過(guò)程中更新列表數(shù)據(jù)
let list = this._resetData(dataList)
list[this._getIndex(e)].left = this._getMoveX(e, startX)
return list
}
touchE(e, dataList, startX, width) { // touchend 更新列表數(shù)據(jù)
let list = this._resetData(dataList)
let disX = this._getEndX(e, startX)
let left = 0
if (disX < 0) { // 判斷滑動(dòng)方向， （向左滑動(dòng)）
// 滑動(dòng)的距離大于刪除寬度的一半就顯示操作列表 否則不顯示
Math.abs(disX) > width / 2 ? left = -width : left = 0
} else { // 向右滑動(dòng)復(fù)位
left = 0
}
list[this._getIndex(e)].left = left
return list
}
deleteItem(e, dataList) { // 刪除功能
dataList.splice(this._getIndex(e), 1)
return dataList
}
每個(gè)函數(shù)都有注釋說(shuō)明， 相信都能看得懂， 就不多解釋了。
有什么更好的方法， 或建議歡迎提出。
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://m.szcjxy.com/wxmini/doc/course/18384.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)： 點(diǎn)擊咨詢(xún)
