效果图:
templete:
<template>
<view class="content-1">
<view class="container-1" @touchstart="touchS" @touchmove="touchM" @touchend="touchE"
:style="{'left':act_touch==index?leftStyle + 'upx':0}" :data-index="index" v-for="(i, index) in 3">
<view>
编译成功编译成功编译成功编译成功编译成功
</view>
<view class="delete-1" @click="delData">
删除
</view>
</view>
</view>
</template>
data:
leftStyle: 0,
startX: 0,
hiddenFlag: true,
delBtnWidth: 220,
act_touch:null,
js:
// 开始移动时
touchS({
touches
}) {
// startX记录开始移动的位置
if (touches.length === 1) {
this.startX = touches[0].clientX;
}
// hiddenFlag为true则是从右向左,为false则是从左向右
if (this.leftStyle === 0) {
this.hiddenFlag = true;
} else {
this.hiddenFlag = false;
}
},
touchM(e) {
if (e.touches.length === 1) {
//手指移动时水平方向位置
const moveX = e.touches[0].clientX;
this.moveFunc(moveX);
//获取手指触摸的是哪一项
console.log(e.currentTarget.dataset.index)
var index = e.currentTarget.dataset.index;
this.act_touch = index;
}
},
touchE({
touches
}) {
const {
leftStyle
} = this;
const {
delBtnWidth
} = this;
// 如果停止滑动的距离大于二分之一则直接弹出删除按钮,不然则left为0
if (-leftStyle > delBtnWidth / 2) {
this.leftStyle = -delBtnWidth;
} else {
this.leftStyle = 0;
}
},
moveFunc(moveX) {
// 原始位置向左,leftStyle为小于0;原始位置向右,leftStyle为大于0
// disX为相对最初位置的左右距离
// 大于0为向右,小于0为向左
const disX = moveX - this.startX;
const delBtnWidth = this.delBtnWidth;
let offsetNum = 0;
if (-disX >= delBtnWidth && this.leftStyle === -delBtnWidth) {
return;
}
console.log(disX, this.hiddenFlag);
// this.hiddenFlag为true则是从左到右,则应该将container向左移动
// this.hiddenFlag为false则是从右向左,则应该将container向右移动
if (this.hiddenFlag) {
// 此时container为最右边,则应该将container向左移动
// disX大于0为相对原始位置的向右移动,则直接将offsetNum置为0
// 否则为向左移动,offsetNum为disX相反的值,判断是否超过设置的最大位置
if (disX == 0 || disX > 0) {
offsetNum = 0;
} else {
offsetNum = disX;
if (disX <= -delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
offsetNum = -delBtnWidth;
}
}
} else {
// 此时container为最左边,应该向右移动
// disX小于0为相对原始位置的向左移动,则直接将offsetNum置为-this.delBtnWidth
// 否则为相对原始位置的向右移动,此时应该将最大位置与向右位置的差值为此刻位置,判断是否为大于0
if (disX < 0) {
offsetNum = -this.delBtnWidth;
} else {
offsetNum = -this.delBtnWidth + disX;
if (offsetNum > 0) {
offsetNum = 0;
}
}
}
this.leftStyle = offsetNum;
},
//删除方法
delData() {
console.log("删除")
uni.showModal({
title: '提示',
content: "确认删除该职位?",
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
css:
.content-1{
width: 100%;
overflow-x: hidden;
background-color: #f4f4f4;
border-radius: none;
}
.container-1 {
position: relative;
margin-top: 26rpx;
margin-bottom: 20upx;
background-color: #fff;
padding:20upx;
}
.delete-1{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: -107px;
width: 65px;
height: 38px;
line-height: 39px;
font-weight: 500;
font-size: 16px;
text-align: center;
color: #FFFFFF;
background: #FF1C1C;
width: 106px;
}