小程序左滑出现删除框点击删除

效果

 

HTML代码

			
				
					
				
				
					
				
				
					单品
					{{item.goods_name}}
				
				
					￥{{item.all_price}}
				
				
					
						
					
					
						{{item.num}}
					
					
						
					
				
				
					{{item.genre_str}}
				
			
			
				删除
			
		

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,
      })
    }
  },

　　

 

转载于:https://www.cnblogs.com/lcming/p/7839752.html