<template>
<view class="container">
<view v-for="(item,index) in chatList" :key="index" :class="['touch-item', item.isTouchMove ? 'touch-move-active' : '']"
@touchstart="touchstart($event)" @touchmove="touchmove(index, $event)">
<view class="content">
{{item.content}}
<view>{{new Date().toLocaleString()}}</view>
</view>
<view class="del" @tap="del(index)">
<uni-icons type="trash" size="30" color="white" ></uni-icons>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
chatList: [],
startX: 0,
startY: 0
}
},
onLoad() {
let arr = [];
for (var i = 0; i < 10; i++) {
arr.push({
content: i + " 向左滑动删除-<<",
isTouchMove: false
})
}
this.chatList = arr;
},
methods: {
touchstart: function (target) {
this.chatList.forEach( (v, i) => {
if (v.isTouchMove)
v.isTouchMove = false;
})
this.startX = target.changedTouches[0].clientX;
this.startY = target.changedTouches[0].clientY;
},
touchmove: function (indexNum, target) {
let that = this,
index = indexNum,
startX = that.startX,
startY = that.startY,
touchMoveX = target.changedTouches[0].clientX,
touchMoveY = target.changedTouches[0].clientY,
angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
that.chatList.forEach(function (v, i) {
v.isTouchMove = false
if (Math.abs(angle) > 15) return;
if (i == index) {
if (touchMoveX > startX)
v.isTouchMove = false
else
v.isTouchMove = true
}
})
},
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
del: function (index) {
this.chatList.splice(index, 1);
}
}
}
</script>
<style>
.touch-item {
font-size: 14px;
display: flex;
justify-content: space-between;
border-bottom:1px solid #ccc;
width: 100%;
overflow: hidden
}
.content {
display: flex;
width: 100%;
line-height: 22px;
margin-right:0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(90px);
transform: translateX(90px);
margin-left: -90px;
}
.del {
background-color: orangered;
width: 90px;
display: flex;
flex-direction: column;
align-chatList: center;
justify-content: center;
color: #fff;
-webkit-transform: translateX(90px);
transform: translateX(90px);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.touch-move-active .content,
.touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}
</style>