之前有一篇文章也写了长按弹出确认框的功能,在android机上测试过完全没问题,到后面整体测试时发现IOS这个功能长按移除就消失了,
除非长按不松手,用另外一只手点击确定才能完成操作,所以这次做了修改,IOS和android亲测有效哦~
CSS:
<li v-for="(item,idx) in addressList" :key="idx" @touchstart="longPress" @touchend="removePress(item)" @click="chooseAddress(item)">
JS:
// 删除地址,长按开始 longPress () { this.touchstartTime = new Date().getTime() }, // 删除地址,长按结束 removePress (item) { this.touchendTime = new Date().getTime() this.duration = this.touchendTime - this.touchstartTime if (this.duration >= 800) { MessageBox.confirm(‘确认删除吗?‘).then(res => { this.addressList.splice(item, 1)
toast(‘删除成功~‘) }).catch(() => { }) } }
JS: 接好后端接口时的数据
// 删除地址,长按开始 longPress () { this.touchstartTime = new Date().getTime() }, // 删除地址,长按结束 removePress (item) { this.touchendTime = new Date().getTime() this.duration = this.touchendTime - this.touchstartTime if (this.duration >= 800) { 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) this.getAddressList() Toast(‘删除成功‘) } }).catch(err => { console.log(err) }) }).catch(() => { }) } }