概述
效果图：
HTML
<!-- 一个商品项 -->
<block v-for="(i,intt) in item.skuList" :key="i.goodsSku.id">
<view class="item-box" @touchstart="itemTouchStart($event, intt,index)"
@touchmove="itemTouchMove($event, intt,index)" @touchend="itemTouchEnd($event, intt,index)"
:style="{ transform: activeIndex === intt && vitrIndex==index ? 'translateX( ' + itemTransLateX + 'px)' : 0, transition: 'all 0.4s' }">
<view class="content-box">
<view style="line-height: 200upx;">
<radio color=" #FF4E00" value="r1" :checked="i.checked" style="transform: scale(0.8);"
@click="selectGet(i)" />
</view>
<view class="shoppList_con_img">
<image :src="shopImgUrl+i.goodsSku.small"></image>
</view>
<view class="shoppList_con_list" @click='godetaPage(item,i.goodsSku.id,i.goodsSku.goodsId)'>
<view class="shoppList_con_title">{{i.goodsSku.goodsName}}</view>
<view class="shoppList_con_message">
<text class="shoppList_con_item">{{i.goodsSku.simpleSpecs}}</text>
<text class="shoppList_con_item">自提</text>
</view>
<view class="changNum">
<view class="changNum_pric"><text style='font-size: 28upx;'>¥</text>
{{i.goodsSku.price}}
</view>
<view class="getnum" style="display: flex;">
<view @click.stop="numSubtract(i)">
<image src="../../static/imgE/jian.png" style="width: 40upx;height: 40upx;">
</image>
</view>
<view class="num">{{i.num}}</view>
<view @click.stop="numAdd(i)">
<image src="../../static/imgE/jia.png" style="width: 40upx;height: 40upx;">
</image>
</view>
</view>
</view>
<view style=";padding-right: 28upx;color: red;" v-if="i.errorMessage">
*该{{i.errorMessage}}</view>
</view>
</view>
<view class="del-box" @click.stop="itemDelClick(i)" @touchend.stop>
<view class="delete_del">
<view class="delete_img">
<image src="../../static/imgE/gwcSC.png"></image>
</view>
<view class="delete_text">删除</view>
</view>
<view class="delete_bgimg"></view>
</view>
</view>
<view class="xian"></view>
</block>JS
// 手指触摸事件
itemTouchStart(e, i, index) {
this.activeIndex = i;
this.vitrIndex = index;
this.startX = e.changedTouches[0].pageX;
// console.log('手指触摸时', this.startX);
},
// 手指移动事件
itemTouchMove(e) {
let moveX = e.changedTouches[0].pageX;
//计算删除划出的距离 具体根据实际情况 修改
// this.itemTransLateX = moveX - this.startX >= 0 ? 0 : moveX - this.startX;
this.itemTransLateX = -100
// console.log(moveX)
// console.log('手指移动了', this.itemTransLateX);
},
// 手指离开事件
itemTouchEnd(e, i, index) {
let endX = e.changedTouches[0].pageX;
// 如果手指离开和手指触摸时的值一致则是点击事件的行为，不以滑动的逻辑处理此行为
if (endX == this.startX) {
if (this.itemTransLateX !== 0) return (this.itemTransLateX = 0);
return;
}
this.itemTransLateX = endX - this.startX;
// console.log('移动量', this.itemTransLateX);
this.itemTransLateX = this.itemTransLateX <= -41 ? -100 : 0;
// console.log('手指离开时', endX);
},
// 数据项的删除按钮点击事件
itemDelClick(item) {
uni.showModal({
title: '是否删除商品？',
content: '',
cancelText: '取消',
confirmText: '确认删除',
confirmColor: '#FF4E00',
success: (res) => {
if (res.confirm) {
skuRemoveAPI({
skuIds: item.goodsSku.id
}).then(res => {
if (res.success) {
this.initData()
this.itemTransLateX = 0
}
})
}
// this.login()
}
})
},CSS
.item-box {
margin-top: 15upx;
// width: 900upx;
width: 884upx;
height: 250upx;
display: flex;
align-items: center;
// height: 100%;
.content-box {
width: 80%;
// height: 100%;
overflow: hidden;
display: flex;
.shoppList_con_img {
width: 200upx;
width: 200upx;
margin-left: 26upx;
image {
width: 200upx;
height: 200upx;
border-radius: 12upx;
}
}
.shoppList_con_list {
width: 100%;
margin-left: 24upx;
.shoppList_con_title {
width: 90%;
height: 78upx;
}
.shoppList_con_message {
margin-top: 16upx;
height: 30upx;
.shoppList_con_item {
// background: #F2F3F3;
// border-radius: 4upx;
// padding: 0 16upx;
// margin-right: 24upx;
background: rgba(255, 78, 0, 0.05);
color: #FF4E00;
border-radius: 4upx;
font-size: 24upx;
padding: 0 16upx 0 14upx;
margin-right: 10upx;
}
}
.changNum {
display: flex;
margin-top: 30upx;
// justify-content: space-between;
// width: 100%;
.changNum_pric {
color: #FF4E00;
font-weight: bold;
font-size: 36upx;
margin-right: 50upx;
}
.getnum {
display: flex;
.num {
margin: 0 32upx;
width: 30upx;
text-align: center;
font-weight: bold;
font-size: 36upx;
line-height: 36upx;
}
}
}
}
}
.del-box {
// background-color: #FF4E00;
// width: 165upx;
width: 200upx;
height: 100%;
// background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), #F2F3F3;
// border-radius: 50%;
// background-image: linear-gradient(45deg, #F5DFDF, #F5DFDF);
// filter: blur(40px);
// position: relative;
// z-index: 998;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), #F2F3F3;
.delete_bgimg {
// width: 350upx;
// height: 350upx;
// background-image: linear-gradient(45deg, #F5DFDF, #F5DFDF);
// filter: blur(40px);
}
.delete_del {
// background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), #F2F3F3;
// border-radius: 50%;
// background-image: linear-gradient(45deg, #F5DFDF, #F5DFDF);
// filter: blur(40px);
.delete_img {
// position: absolute;
// top: 0;
// left: 0;
// z-index: 999;
width: 48upx;
height: 48upx;
margin: 0 auto;
image {
width: 48upx;
height: 48upx;
}
}
.delete_text {
text-align: center;
color: #FF4E00;
font-size: 24upx;
}
}
}
}
最后
以上就是动人大门为你收集整理的uniapp 购物车实现左滑删除商品效果图：HTMLJSCSS的全部内容，希望文章能够帮你解决uniapp 购物车实现左滑删除商品效果图：HTMLJSCSS所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复