微信小程序列表左滑删除，删除按钮自适应高度，删除后列表归位，同时存在一个左滑元素，目前为止写过最舒服的左滑删除
作者：互联网
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>
标签：左滑,删除,flex,color,items,列表,width,isTouchMove,font 来源： https://www.cnblogs.com/lishuang2243/p/12660458.html