微信小程序列表左滑删除，删除按钮自适应高度，删除后列表归位，同时存在一个左滑元素，目前为止写过最舒服的左滑删除
时间：2020-04-08 16:24:41
收藏：0
阅读：180
js
page({
data:{
items:[
//isTouchMove初始化取消所有元素的向左滑动
{name:‘店名范德萨‘,huowu:‘鸭脖货物鸭肠鸭头鸭爪鸭翅‘,time:‘2032-32-32 12:21‘,zhuangtai:‘待付款‘,price:‘23‘,current:1,isTouchMove: false},
{name:‘店名久久丫‘,huowu:‘鸭脖货物鸭肠鸭头鸭爪鸭翅‘,time:‘2032-32-32 12:21‘,zhuangtai:‘待收货‘,price:‘23‘,current:2,isTouchMove: false},
{name:‘店名武汉鸭头‘,huowu:‘鸭脖货物鸭肠鸭头鸭爪鸭翅‘,time:‘2032-32-32 12:21‘,zhuangtai:‘待评价‘,price:‘23‘,current:3,isTouchMove: false},
{name:‘店名周黑鸭‘,huowu:‘鸭脖货物鸭肠鸭头鸭爪鸭翅‘,time:‘2032-32-32 12:21‘,zhuangtai:‘退款‘,price:‘23‘,current:4,isTouchMove: false},
]
},
//手指触摸动作开始 记录起点X坐标
touchstart: function (e) {
//开始触摸时 重置所有删除
this.data.items.forEach(function (v, i) {
if (v.isTouchMove)//只操作为true的
v.isTouchMove = false;
})
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
items: this.data.items
})
},
//滑动事件处理
touchmove: function (e) {
var that = this,
index = e.currentTarget.dataset.index,//当前索引
startX = that.data.startX,//开始X坐标
startY = that.data.startY,//开始Y坐标
touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
//获取滑动角度
angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
that.data.items.forEach(function (v, i) {
v.isTouchMove = false
//滑动超过30度角 return
if (Math.abs(angle) > 30) return;
if (i == index) {
if (touchMoveX > startX) //右滑
v.isTouchMove = false
else //左滑
v.isTouchMove = true
}
})
//更新数据
that.setData({
items: that.data.items
})
},
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
//删除事件
del: function (e) {
console.log(e)
this.data.items.splice(e.currentTarget.dataset.index, 1)
this.setData({
items: this.data.items
})
},
})
css
.touch-item {
font-size: 14px;
display: flex;
justify-content: space-between;
/* border-bottom:1px solid #ccc; */
width: 690rpx;
margin: 0 auto 15rpx;
overflow: hidden
}
.content {
width: 100%;
padding: 10px;
/* 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: #D42F1E;
width: 137rpx;
display: flex;
font-size: 32rpx;
flex-direction: column;
align-items: 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);
}
.list{
background-color: #fff;
padding: 28rpx 10rpx 30rpx;
border-radius: 20rpx;
width: 100%;
margin-right:0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(90px);
transform: translateX(90px);
margin-left: -90px
}
.title{
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #F9F9F9;
}
.shop{
display: flex;
align-items: center;
}
.shopping{
color: #191919;
font-size: 30rpx;
font-weight: 600;
margin-right: 14rpx;
}
.desc{
color: #959595;
font-size: 26rpx;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: 200rpx;
}
.zhuangtai{
color: #EA2C1A;
font-size: 30rpx;
}
.product{
margin-top: 30rpx;
display: flex;
}
.pLeft{
width: 100rpx;
height: 100rpx;
margin-right: 25rpx;
}
.pImg{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.pRight{
display: flex;
flex-direction: column;
padding-top: 9rpx;
}
.time{
color: #6C6C6C;
font-size: 28rpx;
}
.price{
color: #6C6C6C;
font-size: 28rpx;
margin-top: 16rpx;
}
.operation{
width: 100%;
text-align: right;
height: 60rpx;
display: flex;
justify-content: flex-end;
}
.anniu{
/* padding:0 22rpx; */
width: 150rpx;
height: 60rpx;
text-align: center;
line-height: 56rpx;
border: 1rpx solid #3A3A3A;
border-radius: 30rpx;
background-color: #fff;
color: #3A3A3A;
font-size: 28rpx;
}
wxml
<view class="touch-item {{item.isTouchMove ? ‘touch-move-active‘ : ‘‘}} mylist" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="index">
<view class="list content" catchtap="details">
<view class="title">
<view class="shop">
<view class="shopping">{{item.name}}</view>
<view class="desc">{{item.huowu}}</view>
</view>
<view class="zhuangtai">{{item.zhuangtai}}</view>
</view>
<view class="product">
<view class="pLeft">
<image mode=‘aspectFill‘ src="/images/1.png" class="pImg"></image>
</view>
<view class="pRight">
<view class="time">下单时间：{{item.time}}</view>
<view class="price">总价：￥{{item.price}}</view>
</view>
</view>
<view class="operation">
<view class="anniu" wx:if="{{item.current == 1}}" >去支付</view>
<view class="anniu" wx:if="{{item.current == 2}}">确认收货</view>
<view class="anniu" wx:if="{{item.current == 3}}" bindtap="evaluate">评价</view>
<view class="anniu" wx:if="{{item.current == 4}}">退款进度</view>
</view>
</view>
<view class="del" catchtap="del" data-index="{{index}}">删除</view>
</view>
评论（0）