直接上代码
<template>
<div class="car">
<div class="carView" v-for="(x,index) in shopList" :key="x.goodsId" @touchstart='touchStart($event,index)' @touchmove='touchMove($event,index)' @touchend='touchEnd($event,index)' :style="isMove==index?deleteSlider:'transform:translateX(0px)'">
<div class="goodsView">
<img :src="imgUrls+x.backImg" alt="">
<div class="goodsInfos">
<p>{{x.goodsName}}</p>
<p>￥{{x.salePrice}}</p>
<div class="numsView">
<span @click="reduce(x)"></span>
<input type="number" v-model="x.nums">
<span @click="increase(x)"></span>
</div>
</div>
<h1>x{{x.nums}}</h1>
</div>
<div class="remove" ref='remove' @click="shopList.splice(index,1);isMove=-1">删除</div>
</div>
<div class="footer">
<span>合计：</span>
<span>￥{{allPrice}}</span>
<button @click="gobuy">结算</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
shopList: [],
imgUrls: "",
startX: 0, // 开始pos
endX: 0, // 结束pos
moveX: 0, // 滑动时的pos
disX: 0, // 滑动距离
deleteSlider: "transform:translateX(0px)",
isMove: -1,
flag: true
};
},
created() {
this.imgUrls = this.imgUrl;
this.shopList = JSON.parse(this.$route.query.shopList);
},
methods: {
touchStart(ev, index) {
this.isMove = index;
ev = ev || event;
//tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
console.log(ev, "start", this.isMove);
if (ev.touches.length == 1) {
// 记录开始位置
this.startX = ev.touches[0].clientX;
}
},
touchMove(ev, index) {
ev = ev || event;
this.isMove = index;
console.log(ev, "move");
//获取删除按钮的宽度，此宽度为滑块左滑的最大距离
let wd = this.$refs.remove[index].offsetWidth + 10;
console.log(wd)zai
if (ev.touches.length == 1) {
// 滑动时距离浏览器左侧实时距离
this.moveX = ev.touches[0].clientX;
//起始位置减去 实时的滑动的距离，得到手指实时偏移距离
this.disX = this.startX - this.moveX;
//console.log(this.disX)
// 如果是向右滑动或者不滑动，不改变滑块的位置
if (this.disX < 0 || this.disX == 0) {
this.deleteSlider = "transform:translateX(0px)";
} else if (this.disX > 0) {
// 大于0，表示左滑了，此时滑块开始滑动
//具体滑动距离我取的是 手指偏移距离*5。
this.deleteSlider = "transform:translateX(-" + wd + "px)";
}
}
},
touchEnd(ev) {
ev = ev || event;
let wd = this.$refs.remove.offsetWidth + 10;
if (ev.changedTouches.length == 1) {
let endX = ev.changedTouches[0].clientX;
this.disX = this.startX - endX;
//console.log(this.disX)
//如果距离小于删除按钮一半,强行回到起点
if (this.disX * 5 < wd / 2) {
this.deleteSlider = "transform:translateX(0px)";
} else {
//大于一半 滑动到最大值
this.deleteSlider = "transform:translateX(-" + wd + "px)";
}
}
}
}
};
</script>
<style lang='scss' scoped>
.car {
width: 100%;
height: 100%;
background-color: #ececec;
overflow: auto;
overflow-x: hidden;
padding-bottom: 120px;
box-sizing: border-box;
.carView {
width: 890px;
padding: 20px;
box-sizing: border-box;
transition: all 0.5s;
overflow: hidden;
.goodsView {
width: 710px;
height: 192px;
background-color: #ffffff;
box-shadow: 0px 8px 9px 0px rgba(16, 64, 86, 0.22);
border-radius: 20px;
position: relative;
float: left;
img {
width: 140px;
height: 140px;
padding: 6px 30px;
border-radius: 14px;
border: solid 1px #eeeeee;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.goodsInfos {
float: left;
padding-top: 20px;
margin-left: 20px;
p {
line-height: 40px;
text-align: left;
}
p:nth-child(1) {
font-family: PingFang-SC-Bold;
font-size: 28px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
p:nth-child(2) {
font-family: PingFang-SC-Bold;
font-size: 30px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0px;
color: #ff000d;
opacity: 0.8;
}
.numsView {
margin-top: 20px;
span {
width: 36px;
height: 36px;
border-radius: 4px;
color: white;
font-size: 36px;
line-height: 36px;
display: inline-block;
vertical-align: middle;
}
span:nth-child(1) {
background: url("../assets/jian.png") center center no-repeat;
background-size: 30px 36px;
background-color: #dcdcdc;
}
span:nth-child(3) {
background: url("../assets/jia1.png") center center no-repeat;
background-size: 34px 34px;
background-color: #00a0e9;
}
input {
width: 100px;
height: 36px;
background-color: #eeeeee;
border-radius: 4px;
border: none;
outline: 0;
vertical-align: middle;
margin: 0 20px;
text-align: center;
}
}
}
h1 {
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
font-size: 36px;
font-weight: normal;
font-stretch: normal;
line-height: 70px;
letter-spacing: 0px;
color: #333333;
}
}
.remove {
float: left;
width: 120px;
height: 192px;
background-color: rgb(224, 28, 28);
box-shadow: 0px 8px 9px 0px rgba(16, 64, 86, 0.22);
border-radius: 20px;
margin-left: 20px;
color: white;
text-align: center;
line-height: 192px;
}
}
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color: white;
span {
float: left;
}
span:nth-child(1) {
font-size: 24px;
font-weight: normal;
font-stretch: normal;
line-height: 100px;
letter-spacing: 0px;
color: #333333;
margin-left: 40px;
}
span:nth-child(2) {
font-size: 48px;
font-weight: bold;
font-stretch: normal;
line-height: 100px;
letter-spacing: 0px;
color: #e41e28;
}
button {
float: right;
width: 280px;
height: 100px;
background-color: #00a0e9;
font-size: 36px;
font-weight: normal;
font-stretch: normal;
line-height: 100px;
letter-spacing: 0px;
color: #ffffff;
outline: 0;
border: none;
}
}
</style>
