示例簡(jiǎn)介
本文使用動(dòng)畫(huà)組件wx.createAnimation來(lái)實(shí)現(xiàn)滑動(dòng)操作：
1、左滑動(dòng)顯示操作項(xiàng)區(qū)域；
2、點(diǎn)擊操作項(xiàng)觸發(fā)相應(yīng)方法；
3、右滑動(dòng)和點(diǎn)擊行數(shù)據(jù)收起操作項(xiàng)；
4、點(diǎn)擊“刪除”并確定則刪除該條數(shù)據(jù)。
最終效果：
實(shí)現(xiàn)過(guò)程
1、文件index.wxml和index.wxss代碼如下，這一塊比較簡(jiǎn)單，可自行查看分析；
Tips：“詳情”、“取號(hào)”和“刪除”點(diǎn)擊觸發(fā)使用catchtap，阻止冒泡事件向上冒泡；
{{item.title}} 預(yù)約時(shí)間：{{item.date}} 狀態(tài)：{{item.status}} 詳情 取號(hào) 刪除 .container .line { display: flex; padding: 20rpx 30rpx; border-bottom: 2rpx solid #ebebeb; position: relative; cursor: pointer;}.container .line .icon-title { margin-top: 28rpx; width: 30rpx; height: 30rpx;}.container .line .mes { flex: 1; margin-left: 10rpx;}.container .line .mes .date, .container .line .mes .status { color: #9d9d9d; font-size: 24rpx; margin-top: 4rpx;}.status text { color: #fba500;}.operation { position: absolute; top: 0; right: -300rpx; height: 152rpx; text-align: center; color: #fff; line-height: 152rpx; display: flex;}.operation view { width: 100rpx;}.operation .detail { background-color: #018efb;}.operation .number { background-color: #fba500;}.operation .delete { background-color: #cfcfcf;}
2、文件index.js存放所有功能的邏輯代碼，下面主要分析幾個(gè)重點(diǎn)方法：
1）方法touchmoveX用于手指觸摸后移動(dòng)時(shí)獲取移動(dòng)距離，并根據(jù)移動(dòng)距離動(dòng)畫(huà)顯示操作項(xiàng)相應(yīng)區(qū)域，使移動(dòng)有即時(shí)效果；
2）方法touchendX用于手指觸摸動(dòng)作結(jié)束時(shí)，如果移動(dòng)距離達(dá)到100，則動(dòng)畫(huà)顯示全部操作項(xiàng)區(qū)域；如果移動(dòng)距離未達(dá)到100，則收起操作項(xiàng)區(qū)域；
3）方法deleteItem用于刪除該條數(shù)據(jù)。
let movedistance = 0;Page({ data: { currentIndex: 0, // 列表操作項(xiàng)的index recordList: [{ // 列表數(shù)據(jù) id: 1, title: ‘業(yè)務(wù)辦理01’, date: ‘2020-04-21 10:30-12:00’, status: ‘未取號(hào)’ }, { id: 2, title: ‘業(yè)務(wù)辦理02’, date: ‘2020-04-21 10:30-12:00’, status: ‘未取號(hào)’ }, { id: 3, title: ‘業(yè)務(wù)辦理03’, date: ‘2020-04-21 10:30-12:00’, status: ‘取號(hào)’ }] }, // 打開(kāi)詳情頁(yè) openDetail() { console.log(this.data.currentIndex, ‘點(diǎn)擊詳情’); }, // 取號(hào) getNumber() { console.log(this.data.currentIndex, ‘點(diǎn)擊取號(hào)’); }, // 刪除數(shù)據(jù) deleteItem() { let that = this; let recordList = this.data.recordList; wx.showModal({ title: ‘提示’, content: ‘是否刪除該條數(shù)據(jù)？’, success(res) { if (res.confirm) { that.slideAnimation(0, 500); recordList.splice(that.data.currentIndex, 1); that.setData({ recordList: recordList }); } else if (res.cancel) { console.log(‘用戶點(diǎn)擊取消’) } } }); }, // 手指觸摸動(dòng)作開(kāi)始 touchstartX(e) { this.setData({ currentIndex: e.currentTarget.dataset.index }); // 獲取觸摸X坐標(biāo) this.recordX = e.touches[0].clientX; }, // 點(diǎn)擊操作 resetX() { this.slideAnimation(0, 500); }, // 手指觸摸后移動(dòng) touchmoveX(e) { let currentX = e.touches[0].clientX; movedistance = currentX – this.recordX; // 獲取移動(dòng)距離 this.slideAnimation(movedistance, 500); }, // 手指觸摸動(dòng)作結(jié)束 touchendX() { let recordX; if (movedistance = -100) { // 移動(dòng)未達(dá)到距離即還原 recordX = 0; } this.slideAnimation(recordX, 500); }, // 滑動(dòng)動(dòng)畫(huà) slideAnimation(recordX, time) { let animation = wx.createAnimation({ duration: time, timingFunction: ‘ease’ }); animation.translate(recordX + ‘rpx’, 0).step() this.setData({ animation: animation.export() }) }, onLoad: function(options) { wx.setNavigationBarTitle({ title: ‘銀行業(yè)務(wù)’, }); movedistance = 0; // 解決切換到其它頁(yè)面再返回該頁(yè)面動(dòng)畫(huà)失效的問(wèn)題 }})
