效果
HTML代码
<view class="shopIntroBox_outBox" wx:for="{{shopCart}}"> <view class="shopIntroBox {{orderCartDel[index]}}" data-index="{{index}}" data-goodsId="{{item.goods_id}}" data-cartId="{{item.cart_id}}" bindtouchmove="delMove" bindtouchstart="touchstartCart" bindtouchend="touchendCart"> <view class="radioBox" data-index="{{index}}" bindtap="radioBtn"> <radio value="{{item.goods_name}}" checked="{{shopCartRadio[index]}}"/> </view> <view class="imageBox" data-goodsId="{{item.goods_id}}" bindtap="goodsBtnNav"> <image src="{{item.goods_img}}" mode="widthFix"></image> </view> <view class="orderDe_contentBox"> <text class="smTitle">单品</text> <text class="titleBox">{{item.goods_name}}</text> </view> <view class="shopPrice"> <text style="font-size: 20rpx;">¥</text>{{item.all_price}} </view> <view class="priceBox" wx:if="{{!item.num==0}}" style="right:5rpx;"> <view class="addshopCart_btn2_l" bindtap="foodAddBtn4" data-id="{{item.goods_id}}"> <image src="https://pintuanqu.cn/Public/Miniapps/images/addNum1.png"></image> </view> <view class="addshopCart_btn2_m"> {{item.num}} </view> <view class="addshopCart_btn2_l" bindtap="foodAddBtn3" data-id="{{item.goods_id}}"> <image src="https://pintuanqu.cn/Public/Miniapps/images/addNum.png"></image> </view> </view> <view class="thingStateBox"> <view class="thingStateBox_in_box">{{item.genre_str}}</view> </view> </view> <view class="delBox" data-id="{{item.goods_id}}" bindtap="delOrder"> <view class="delBox_inTxt">删除</view> </view> </view>
CSS代码
.shopIntroBox_outBox .delBox{ width: 120rpx; height: 95%; background: red; color: #fff; position: absolute; display: flex; justify-content: center; align-items: center; right: 0rpx; font-size: 30rpx; z-index: 2; top: 5rpx; } .shopIntroBox_outBox .delBox .delBox_inTxt{ width: 40rpx; } .footerBox_l .allDelBtn{ font-size: 22rpx; color:#c3c3c3; border: 1rpx #d5d5d5 solid; padding: 3rpx 6rpx; height: 30rpx; display: flex; justify-content: center; align-items: center; margin-left: 10rpx; border-radius: 10rpx; z-index: 999; } .shopIntroBox{ padding: 20rpx; background: #fff; display: flex; position: relative; border-bottom: 2rpx #f5f5f5 solid; max-width: 750rpx; transition: .2s linear; z-index: 10; } .orderCartDel{ margin-left: -150rpx; } .shopIntroBox .imageBox{ width: 150rpx; height: 150rpx; overflow: hidden; } .shopIntroBox .imageBox image{ width: 100%; } .shopIntroBox .orderDe_contentBox{ width: 60%; font-size: 32rpx; margin-left:20rpx; display: flex; } .shopIntroBox .radioBox{ width: 40rpx; display: flex; justify-content: center; align-items: center; } radio .wx-radio-input{ width: 26rpx; height: 26rpx; } radio .wx-radio-input.wx-radio-input-checked { background-color: #f0c04b !important; border-color: #f0c04b !important; } .shopIntroBox .orderDe_contentBox .smTitle{ padding: 3rpx 6rpx; font-size: 22rpx; background: #42bceb; color: #fff; margin: 0rpx 5rpx; border-radius: 5rpx; max-height: 30rpx; min-width: 50rpx; } .shopIntroBox .thingStateBox{ display: flex; position: absolute; align-items: center; bottom: 20rpx; left: 230rpx; } .shopIntroBox .thingStateBox .thingStateBox_in_box{ font-size: 22rpx; padding:5rpx 10rpx; border:1px #666 solid; border-radius: 10rpx; margin-right: 10rpx; } .shopIntroBox .shopPrice{ font-size: 30rpx; color: #d04626; margin-left: 10rpx; } .shopIntroBox .orderDe_contentBox .titleBox{ font-size: 28rpx; font-weight: 900; max-height: 70rpx; line-height: 35rpx; overflow: hidden; display: block; } .shopIntroBox .priceBox{ position: absolute; height: 50rpx; right: 20rpx; bottom: 20rpx; display: flex; justify-content: center; align-items: center; } .shopIntroBox .priceBox .priceNum{ font-size: 32rpx; font-weight: 900; } .shopIntroBox .priceBox .thingNum{ color: #979797; margin-top: 10rpx; font-size: 28rpx; }
JS 代码
记录初始按下位置检测点击时间
touchstartCart: function(e) { var that = this; this.data.touchDot = e.touches[0].pageX; this.data.touchDotY = e.touches[0].pageY; this.data.interval = setInterval(function(){ that.data.time+=1; },40); },
手指松开操作
touchendCart: function(e) { clearInterval(this.data.interval); this.data.time = 0; this.data.done = false; },
手指滑动操作
delMove:function(e){ var that = this; let touchMove = e.touches[0].pageX; let touchMoveY = e.touches[0].pageY; let touchDotY = this.data.touchDotY; let touchDot = this.data.touchDot; let time = this.data.time; let indexSeceGroupSty = that.data.indexSeceGroupSty; // 定义可执行参数 let seceGroupArr = that.data.seceGroupArr; // 定义透明值 let opacitySty = that.data.opacitySty; // 定义层级 let indexUn = that.data.indexUn; let thatId = e.currentTarget.dataset.index; let orderCartDel = that.data.orderCartDel; // 检测是否点击以后上下滑动//清空时间数据 if(Number(touchDotY)-Number(touchMoveY)>15 || Number(touchDotY)-Number(touchMoveY)<-15){ that.data.time=0; return; } //向左滑动 if(touchMove - touchDot <= -60 && !this.data.done && that.data.time>=3) { orderCartDel[thatId] = "orderCartDel"; that.setData({ orderCartDel:orderCartDel, }) } //向右滑动 if (touchMove - touchDot >= 60 && !this.data.done && that.data.time>=3) { orderCartDel[thatId] = ""; that.setData({ orderCartDel:orderCartDel, }) } },