<view
:class="'list_item ' + (item.touch_move ? 'touch_move' : '')"
@touchstart="touchstart"
@touchmove="touchmove"
:data-index="index"
>
<navigator class="list_item_box">
内容
</navigator>
<view
class="list_item_del"
@tap="list_item_del"
:data-id="item.id"
v-if="type == 1"
>删除</view
>
</view>
.list_item {
display: flex;
justify-content: space-between;
}
.list_item.touch_move .list_item_del,
.list_item.touch_move .list_item_box {
transform: translateX(0);
}
.list_item view {
flex-shrink: 0;
}
.list_item_del {
display: none;
width: 90px;
color: #ffffff;
background: #ff0000;
transition: all 0.4s;
transform: translateX(90px);
border-top-right-radius: 5rpx;
border-bottom-right-radius: 5rpx;
overflow: hidden;
}
.list_item.touch_move .list_item_del {
display: flex;
align-items: center;
justify-content: center;
}
.list_item_box {
width: 100%;
position: relative;
box-sizing: border-box;
margin-left: -90px;
transition: all 0.4s;
transform: translateX(90px);
}
touchstart: function (e) {
var type = that.type;
if (type == 1) {
var list = that.list;
list.forEach(function (v, i) {
if (v.touch_move) {
v.touch_move = false;
}
});
that.list = list;
that.start_x = e.changedTouches[0].clientX;
that.start_y = e.changedTouches[0].clientY;
that.$forceUpdate();
}
},
touchmove: function (e) {
var type = that.type;
if (type == 1) {
var index = e.currentTarget.dataset.index;
var start_x = that.start_x;
var start_y = that.start_y;
var touchMoveX = e.changedTouches[0].clientX;
var touchMoveY = e.changedTouches[0].clientY;
var angle = that.angle(
{ X: start_x, Y: start_y },
{ X: touchMoveX, Y: touchMoveY }
);
var list = that.list;
list.forEach(function (v, i) {
v.touch_move = false;
if (Math.abs(angle) > 30) {
return;
}
if (i == index) {
if (touchMoveX > start_x) {
v.touch_move = false;
} else {
v.touch_move = true;
}
}
});
that.list = list;
that.$forceUpdate();
}
},
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y;
return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
},