微信小程式向左滑動刪除操作（類仿微信、QQ）
阿新 • • 發佈：2018-12-10
上一個小程式的專案裡面做過這個功能，當時沒有記錄下來，今天特意做了一個小的demo放在了github上面，下次在開發中遇到的話就可以直接拿下來程式碼複用了。效果很簡單，類似於微信扣扣刪除聊天欄的效果，想左滑動，出現刪除按鈕，點選即可刪除。
github地址：https://github.com/wangxiaoting666/swipeleft-delete
wxml:
<!--index.wxml--> <view class="container"> <scroll-view style='height:{{height}}px;' scroll-y='{{scrollY}}' class='msg-list' bindscroll='onScroll'> <view wx:for="{{msgList}}" wx:key="id" class='msg-item' animation='{{item.wrapAnimation}}'> <view id='{{item.id}}' class='msg' animation='{{item.animation}}' bindtouchstart='ontouchstart' bindtouchmove='ontouchmove' bindtouchend='ontouchend'> <image class='header-img' src="{{item.headerImg}}"></image> <text class='user-name'>{{item.carid}}</text> <text class='msg-text'>{{item.msgText}}</text> <image class='site-img' src="{{item.siteImg}}"></image> </view> <view class='msg-menu'> <view id='{{item.id}}' class='menu-delete' bindtap='onDeleteMsgTap' bindlongtap='onDeleteMsgLongtap'> 刪除 </view> <view id='{{item.id}}' class='menu-mark' bindtap='onMarkMsgTap' bindlongtap='onMarkMsgLongtap'> 試駕 </view> </view> </view> </scroll-view> </view>
wxss:
/**index.wxss**/ ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .msg-item { width: 100%; height: 150rpx; border-bottom: 1rpx solid rgb(233, 233, 233); position: relative; left: 0; top: 0; overflow: hidden; } .msg { position: absolute; width: 100%; height: 150rpx; left: 0; top: 0; z-index: 100; background-color: #fff; } .header-img { position: absolute; width: 100rpx; height: 100rpx; left: 30rpx; top: 40rpx; border-radius: 10%; } .site-img { position: absolute; width: 70rpx; height: 70rpx; right: 30rpx; top: 40rpx; border-radius: 10%; } .user-name { position: absolute; left: 150rpx; top: 33rpx; font-weight: 600; font-size: 35rpx; } .msg-text { position: absolute; left: 150rpx; bottom: 30rpx; font-size: 80%; color: rgb(127, 127, 127); } .msg-menu { position: absolute; width: 100%; height: 150rpx; left: 0; top: 0; z-index: 0; } .menu-delete { position: absolute; width: 150rpx; height: 148rpx; top: 1rpx; right: 0; background-color: rgb(255, 58, 50); color: #fff; text-align: center; line-height: 150rpx; } .menu-mark { position: absolute; width: 200rpx; height: 148rpx; top: 1rpx; right: 150rpx; background-color: rgb(200, 199, 205); color: #fff; text-align: center; line-height: 150rpx; } /* 底部按鈕 */ .Scancode { font-size: 39rpx; background: rgb(82, 80, 80); position: fixed; bottom: 0; display: flex; width: 100%; justify-content: center; color: #fff; border-radius: 0px; } .search { width: 80rpx; height: 80rpx; line-height: 80rpx; background: #fff; border: 1px solid #c8c8c8; position: fixed; bottom: 130rpx; left: 16rpx; display: flex; justify-content: center; border-radius: 50rpx; /* -webkit-box-shadow:3px 3px 3px #c8c8c8 ; -moz-box-shadow:3px 3px 3px #c8c8c8 ; box-shadow:3px 3px 3px #c8c8c8 ; */ } .search .img { width: 40rpx; height: 40rpx; margin-top: 10rpx; } .user { width: 80rpx; height: 80rpx; line-height: 80rpx; border: 1px solid #c8c8c8; background: #fff; position: fixed; bottom: 130rpx; right: 16rpx; display: flex; color: #fff; justify-content: center; border-radius: 50rpx; /* -webkit-box-shadow:3px 3px 3px #c8c8c8 ; -moz-box-shadow:3px 3px 3px #c8c8c8 ; box-shadow:3px 3px 3px #c8c8c8 ; */ } .user .img { width: 40rpx; height: 40rpx; margin-top: 10rpx; }
js
//index.js //獲取應用例項 var app = getApp() Page({ data: { msgList:[], height:0, scrollY:true }, swipeCheckX:35, //啟用檢測滑動的閾值 swipeCheckState:0, //0未啟用 1啟用 maxMoveLeft:185, //訊息列表項最大左滑距離 correctMoveLeft:175, //顯示選單時的左滑距離 thresholdMoveLeft: 75,//左滑閾值，超過則顯示選單 lastShowMsgId:'', //記錄上次顯示選單的訊息id moveX:0, //記錄平移距離 showState:0, //0 未顯示選單 1顯示選單 touchStartState:0, // 開始觸控時的狀態 0 未顯示選單 1 顯示選單 swipeDirection:0, //是否觸發水平滑動 0:未觸發 1:觸發水平滑動 2:觸發垂直滑動 onLoad: function() { this.pixelRatio = app.data.deviceInfo.pixelRatio; var windowHeight = app.data.deviceInfo.windowHeight; var height = windowHeight; for (var i = 0; i < 5; i++) { var msg = {}; msg.carid = '' + '滬D086' + i+1; msg.msgText = '10801:10001' msg.id = 'id-' + i+1; msg.headerImg = '../../img/car.png'; msg.siteImg = '../../img/site.png'; this.data.msgList.push(msg); } this.setData({msgList:this.data.msgList, height:height}); }, ontouchstart: function(e) { if (this.showState === 1) { this.touchStartState = 1; this.showState = 0; this.moveX = 0; this.translateXMsgItem(this.lastShowMsgId, 0, 200); this.lastShowMsgId = ""; return; } this.firstTouchX = e.touches[0].clientX; this.firstTouchY = e.touches[0].clientY; if (this.firstTouchX > this.swipeCheckX) { this.swipeCheckState = 1; } this.lastMoveTime = e.timeStamp; }, ontouchmove: function(e) { if (this.swipeCheckState === 0) { return; } //當開始觸控時有選單顯示時，不處理滑動操作 if (this.touchStartState === 1) { return; } var moveX = e.touches[0].clientX - this.firstTouchX; var moveY = e.touches[0].clientY - this.firstTouchY; //已觸發垂直滑動，由scroll-view處理滑動操作 if (this.swipeDirection === 2) { return; } //未觸發滑動方向 if (this.swipeDirection === 0) { console.log(Math.abs(moveY)); //觸發垂直操作 if (Math.abs(moveY) > 4) { this.swipeDirection = 2; return; } //觸發水平操作 if (Math.abs(moveX) > 4) { this.swipeDirection = 1; this.setData({scrollY:false}); } else { return; } } //禁用垂直滾動 // if (this.data.scrollY) { // this.setData({scrollY:false}); // } this.lastMoveTime = e.timeStamp; //處理邊界情況 if (moveX > 0) { moveX = 0; } //檢測最大左滑距離 if (moveX < -this.maxMoveLeft) { moveX = -this.maxMoveLeft; } this.moveX = moveX; this.translateXMsgItem(e.currentTarget.id, moveX, 0); }, ontouchend: function(e) { this.swipeCheckState = 0; var swipeDirection = this.swipeDirection; this.swipeDirection = 0; if (this.touchStartState === 1) { this.touchStartState = 0; this.setData({scrollY:true}); return; } //垂直滾動，忽略 if (swipeDirection !== 1) { return; } if (this.moveX === 0) { this.showState = 0; //不顯示選單狀態下,啟用垂直滾動 this.setData({scrollY:true}); return; } if (this.moveX === this.correctMoveLeft) { this.showState = 1; this.lastShowMsgId = e.currentTarget.id; return; } if (this.moveX < -this.thresholdMoveLeft) { this.moveX = -this.correctMoveLeft; this.showState = 1; this.lastShowMsgId = e.currentTarget.id; } else { this.moveX = 0; this.showState = 0; //不顯示選單,啟用垂直滾動 this.setData({scrollY:true}); } this.translateXMsgItem(e.currentTarget.id, this.moveX, 500); //this.translateXMsgItem(e.currentTarget.id, 0, 0); }, onDeleteMsgTap: function(e) { this.deleteMsgItem(e); }, onDeleteMsgLongtap: function(e) { console.log(e); }, onMarkMsgTap: function(e) { console.log(e); }, onMarkMsgLongtap: function(e) { console.log(e); }, getItemIndex: function(id) { var msgList = this.data.msgList; for (var i = 0; i < msgList.length; i++) { if (msgList[i].id === id) { return i; } } return -1; }, deleteMsgItem: function(e) { var animation = wx.createAnimation({duration:200}); animation.height(0).opacity(0).step(); this.animationMsgWrapItem(e.currentTarget.id, animation); var s = this; setTimeout(function() { var index = s.getItemIndex(e.currentTarget.id); s.data.msgList.splice(index, 1); s.setData({msgList: s.data.msgList}); }, 200); this.showState = 0; this.setData({scrollY:true}); }, translateXMsgItem: function(id, x, duration) { var animation = wx.createAnimation({duration:duration}); animation.translateX(x).step(); this.animationMsgItem(id, animation); }, animationMsgItem: function(id, animation) { var index = this.getItemIndex(id); var param = {}; var indexString = 'msgList[' + index + '].animation'; param[indexString] = animation.export(); this.setData(param); }, animationMsgWrapItem: function(id, animation) { var index = this.getItemIndex(id); var param = {}; var indexString = 'msgList[' + index + '].wrapAnimation'; param[indexString] = animation.export(); this.setData(param); }, })
原文作者：祈澈姑娘。 技術部落格：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子一枚，愛程式設計，愛運營，愛折騰。長期堅持總結工作中遇到的技術問題。