正文
VUE: 移动端长按弹出确认删除地址（后面测试发现IOS有BUG，后面有更新随笔，更新后的亲测有效）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
收货地址的删除方式可能有很多种，我目前见过的暂时只有两种（1、在编辑页删除 2、长按某一条收货地址弹出是否删除地址）
在开发的项目上要求第二种删除方法，于是记录一下我写的代码 ~
1.首先，在移动端，手指点击一个元素，会经过：touchstart --> touchmove --> touchend -->click。
在temlate里面写长按事件（@touchstart：触摸开始 touchend：触摸结束，手指离开时）
<ul>
<li v-for="(item,idx) in addressList" :key="idx" @touchstart="touchin(item)" @touchend="cleartime(item)">
<div>
<p class="name">{{item.nickname}} <span>{{item.tel}}</span> </p>
<div class="addrInfo">
<span class="span">{{item.areaId}}</span><span>{{item.address}}</span>
</div>
</li>
</ul>
2.data里面的数据（为了方便给大家展示，写的是死数据）
data () {
return {
addressList: [
{nickname：'齐一', tel：15065124120, areaId: '某某省某某市某某区', address: '123路几座几号楼502'}，
{nickname：'齐一', tel：15065124120, areaId: '某某省某某市某某区', address: '123路几座几号楼502'}
]
}
}
3.1用js写方法（我这里引入了一个mint-ui的确认是否删除的弹窗 import { MessageBox } from 'mint-ui'）
methods: {
/*
* 长按显示删除地址
*/
touchin (item) {
// 再次清空定时器，防止重复注册定时器
clearInterval(this.loop)
this.Loop = setTimeout(function () {
MessageBox.confirm('确认删除吗？').then(res => {
this.addressList.splice(item, 1)
}).catch(() => {
})
}.bind(this), 1000)
},
/*
* 将每次手指移出之后将计时器清零
*/
cleartime (item) {
clearInterval(this.Loop)
}
}
3.2.这是我接好后台接口时候的数据，方便我自己看；大家看上面那个然后自己套数据就好了（当然不套自己项目的数据也是能实现功能的~）
methods: {/*
* 长按显示删除地址
*/
touchin (item) {
// 再次清空定时器，防止重复注册定时器
clearInterval(this.Loop)
this.Loop = setTimeout(function () {
MessageBox.confirm('确认删除吗？').then(res => {
let _formData = {
cusmallToken: getStore('cusmallToken'),
addressId: item.id
}
commonDkApiFun(_formData, '/ttmb/api/member/delAddress').then(res => {
if (res.data.ret === 0) {
this.addressList.splice(item, 1)
}
}).catch(err => {
console.log(err)
})
}).catch(() => {
})
}.bind(this), 1000)
},
/*
* 将每次手指移出之后将计时器清零
*/
cleartime (item) {
clearInterval(this.Loop)
}
}methods: {/*
* 长按显示删除地址
*/
touchin (item) {
// 再次清空定时器，防止重复注册定时器
clearInterval(this.Loop)
this.Loop = setTimeout(function () {
MessageBox.confirm('确认删除吗？').then(res => {
let _formData = {
cusmallToken: getStore('cusmallToken'),
addressId: item.id
}
commonDkApiFun(_formData, '/ttmb/api/member/delAddress').then(res => {
if (res.data.ret === 0) {
this.addressList.splice(item, 1)
}
}).catch(err => {
console.log(err)
})
}).catch(() => {
})
}.bind(this), 1000)
},
/*
* 将每次手指移出之后将计时器清零
*/
cleartime (item) {
clearInterval(this.Loop)
}
}
