VUE: 移动端长按弹出确认删除地址(2)

  之前有一篇文章也写了长按弹出确认框的功能,在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(() => {
    })
  }
}
原文地址:https://www.cnblogs.com/Awen71815iou/p/11570747.html