示例簡介
本文使用動畫組件wx.createAnimation來實現(xiàn)滑動操作：
1、左滑動顯示操作項區(qū)域；
2、點擊操作項觸發(fā)相應(yīng)方法；
3、右滑動和點擊行數(shù)據(jù)收起操作項；
4、點擊“刪除”并確定則刪除該條數(shù)據(jù)。
最終效果：
實現(xiàn)過程
1、文件index.wxml和index.wxss代碼如下，這一塊比較簡單，可自行查看分析；
Tips：“詳情”、“取號”和“刪除”點擊觸發(fā)使用catchtap，阻止冒泡事件向上冒泡；
{{item.title}} 預(yù)約時間：{{item.date}} 狀態(tài)：{{item.status}} 詳情 取號 刪除 .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存放所有功能的邏輯代碼，下面主要分析幾個重點方法：
1）方法touchmoveX用于手指觸摸后移動時獲取移動距離，并根據(jù)移動距離動畫顯示操作項相應(yīng)區(qū)域，使移動有即時效果；
2）方法touchendX用于手指觸摸動作結(jié)束時，如果移動距離達(dá)到100，則動畫顯示全部操作項區(qū)域；如果移動距離未達(dá)到100，則收起操作項區(qū)域；
3）方法deleteItem用于刪除該條數(shù)據(jù)。
let movedistance = 0;Page({ data: { currentIndex: 0, // 列表操作項的index recordList: [{ // 列表數(shù)據(jù) id: 1, title: ‘業(yè)務(wù)辦理01’, date: ‘2020-04-21 10:30-12:00’, status: ‘未取號’ }, { id: 2, title: ‘業(yè)務(wù)辦理02’, date: ‘2020-04-21 10:30-12:00’, status: ‘未取號’ }, { id: 3, title: ‘業(yè)務(wù)辦理03’, date: ‘2020-04-21 10:30-12:00’, status: ‘取號’ }] }, // 打開詳情頁 openDetail() { console.log(this.data.currentIndex, ‘點擊詳情’); }, // 取號 getNumber() { console.log(this.data.currentIndex, ‘點擊取號’); }, // 刪除數(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(‘用戶點擊取消’) } } }); }, // 手指觸摸動作開始 touchstartX(e) { this.setData({ currentIndex: e.currentTarget.dataset.index }); // 獲取觸摸X坐標(biāo) this.recordX = e.touches[0].clientX; }, // 點擊操作 resetX() { this.slideAnimation(0, 500); }, // 手指觸摸后移動 touchmoveX(e) { let currentX = e.touches[0].clientX; movedistance = currentX – this.recordX; // 獲取移動距離 this.slideAnimation(movedistance, 500); }, // 手指觸摸動作結(jié)束 touchendX() { let recordX; if (movedistance = -100) { // 移動未達(dá)到距離即還原 recordX = 0; } this.slideAnimation(recordX, 500); }, // 滑動動畫 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; // 解決切換到其它頁面再返回該頁面動畫失效的問題 }})
