环境：taro/vue 开发的小程序
效果图
结构
布局思路：利用margin-right:-125rpx;讲删除按钮隐藏，触发条件以后，改变margin-right，margin-left状态，讲删除按钮展示，选择按钮隐藏
css
.shop_item_view{
background: #fff;
margin: 25rpx 28rpx;
.shop_item {
overflow: hidden;
.shop_name {
display: flex;
flex-direction: row;
color: #14151a;
font-size: 28rpx;
padding: 38rpx 30rpx;
display: flex;
flex-direction: row;
align-items: center;
image {
width: 20rpx;
height: 20rpx;
}
}
.good_item {
padding: 0 30rpx;
margin-bottom: 48rpx;
position: relative;
padding-right: 145rpx;
margin-left: 0;
margin-right: -115rpx;
transition: all .3s;
&.is_delete{
margin-right: 0;
margin-left: -85rpx;
.no_buy{
margin-right: 26rpx;
}
}
.left_item{
display: flex;
flex-direction: row;
align-items: center;
.good_l {
display: flex;
flex-direction: row;
align-items: center;
image {
width: 184rpx;
height: 184rpx;
}
}
.good_r {
width: 360rpx;
margin-left: 25rpx;
.good_name {
width: 360rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 28rpx;
color: #14151a;
}
.no_buy_good_name{
color: #999999;
}
.tag {
margin: 32rpx 0 28rpx;
.tag_item {
background: #f4f4f4;
padding: 2rpx 15rpx;
color: #666666;
font-size: 24rpx;
border-radius: 4rpx;
}
}
.btm_box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.price {
color: #f64747;
font-size: 32rpx;
}
.number_box {
font-size: 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
input {
font-size: 28rpx;
width: 76rpx;
text-align: center;
background: #f4f4f4;
margin: 0 20rpx;
}
}
}
}
}
.right_item{
background: #F64747;
position: absolute;
top: 0;
right: 0;
color: #fff;
font-size: 28rpx;
width: 115rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
data
data() { return { startX: 0, //开始触摸的位置 endX: 0, //结束触摸的位置 disX: 0, //移动距离 lastX: 0, //上一次X坐标 }; },
监听左滑右滑
// 监听左滑右滑
touchStart: function (ev) {
ev = ev || event;
// console.log(ev.targetTouches);
// console.log(ev.changedTouches);
if (ev.touches.length == 1) { //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
this.startX = this.lastX = ev.touches[0].clientX; // 记录开始位置
}
},
touchMove: function (ev) {
ev = ev || event;
// ev.touches.length == 1 触摸移动，当且仅当屏幕只有一个触摸点
if (ev.touches.length == 1) {
// 记录一次坐标值
this.lastX = ev.touches[0].clientX;
}
},
touchEnd: function (ev,cartItem) {
ev = ev || event;
// ev.changedTouches.length == 1
// 1.一个手指触摸
// 一个手指先触摸，另一个手指触摸，一个一个触摸，不是同时触摸
if (ev.changedTouches.length == 1) {
let endX = ev.changedTouches[0].clientX;
this.disX = endX - this.startX;
// 只有滑动大于一半距离才触发
if (Math.abs(this.disX) > 100) {
if (this.disX < 0) {
console.log(‘左滑‘);
cartItem.isDelete=true;
} else {
console.log(‘右滑‘);
cartItem.isDelete=false;
}
}
}
},
今日早些下班，后续接着补上。