problem description
the environmental background of the problems and what methods you have tried
left slide shows delete, click to do the operation, but click delete has always been the editing method, confused
related codes
/ / Please paste the code text below (do not replace the code with pictures)
<ul>
<li class="clearfix" v-for="(item, index) in addressList" :key="index">
<div @touchstart="touchStart($event, index)" @touchmove="touchMove($event, index)" @touchend="touchEnd($event, index)" :style="item.deleteSlider">
<div class="address-info fl">
{{item.address}}
{{item.name}}<span>{{item.mobile}}</span>
</div>
<div class="edit fl" @click="edit(index)">
<div v-if="item.default" class="default-address"></div>
{{ $t("button.modify") }}
</div>
<div class="delete fl" @click="del(index)" :key="index" ref="remove">
{{ $t("button.delete") }}
</div>
</div>
</li>
</ul>addressList: [{
id: 1,
name: "Nola",
address: "",
mobile: "18559301258",
default: 1
}, {
id: 2,
name: "Caroline",
address: "",
mobile: "18559301258"
}],
delWidth: "56.25",
startX: 0, //
endX: 0, //
moveX: 0, //
disX: 0, //
deleteSlider: "" // ,v-bind:style="deleteSlider"edit (id) {
console.log("")
let params = {
}
this.$router.push({path: "/addAddress", props: params, component: resolve => require(["@/Address/Add.vue"], resolve)})
},
del (id) { //
console.log("")
this.addressList.splice(id, 1)
console.log(this.addressList)
},
touchStart (ev) {
ev = ev || event
if (ev.touches.length === 1) { // tounches1
this.startX = ev.touches[0].clientX //
}
},
touchMove (ev, id) {
ev = ev || event
let that = this
if (ev.touches.length === 1) {
that.moveX = ev.touches[0].clientX //
that.disX = that.startX - that.moveX //
let list = deepCopy(that.addressList)
if (that.disX < 0 || that.disX === 0) { //
list[id].deleteSlider = "transform:translateX(0px)"
} else if (that.disX > 0) { // 0
list[id].deleteSlider = "transform:translateX(-" + that.disX * 5 + "px)"
if (that.disX * 5 >= that.delWidth) { //
list[id].deleteSlider = "transform:translateX(-" + this.delWidth + "px)"
}
}
// that.addressList = deepCopy(list)
}
},
touchEnd (ev, id) {
let that = this
ev = ev || event
if (ev.changedTouches.length === 1) {
let endX = ev.changedTouches[0].clientX
that.disX = that.startX - endX
let list = deepCopy(that.addressList)
if ((that.disX * 5) < (that.delWidth / 2)) { // ,
list[id].deleteSlider = "transform:translateX(0px)"
} else {
list[id].deleteSlider = "transform:translateX(-" + that.delWidth + "px)" //
}
that.addressList = deepCopy(list)
}
}what result do you expect? What is the error message actually seen?
I want to click to delete the message, but when I click to delete, it becomes an editor jump page. Is it true that the actual click event is still editing this piece of
when sliding delete?