标签：左滑 删除 flex color items 列表 width isTouchMove font
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。