APP
上一個小程序的項目里面做過這個功能，當時沒有記錄下來，今天特意做了一個小的demo放在了github上面，下次在開發(fā)中遇到的話就可以直接拿下來代碼復用了。效果很簡單，類似于微信扣扣刪除聊天欄的效果，想左滑動，出現(xiàn)刪除按鈕，點擊即可刪除。
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, // 開始觸摸時的狀態(tài) 0 未顯示菜單 1 顯示菜單
swipeDirection:0, //是否觸發(fā)水平滑動 0:未觸發(fā) 1:觸發(fā)水平滑動 2:觸發(fā)垂直滑動
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;
//已觸發(fā)垂直滑動，由scroll-view處理滑動操作
if (this.swipeDirection === 2) {
return;
}
//未觸發(fā)滑動方向
if (this.swipeDirection === 0) {
console.log(Math.abs(moveY));
//觸發(fā)垂直操作
if (Math.abs(moveY) > 4) {
this.swipeDirection = 2;
return;
}
//觸發(fā)水平操作
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;
//不顯示菜單狀態(tài)下,激活垂直滾動
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://blog.51cto.com/u
