收货地址的删除方式可能有很多种,我目前见过的暂时只有两种(1、在编辑页删除 2、长按某一条收货地址弹出是否删除地址)
在开发的项目上要求第二种删除方法,于是记录一下我写的代码 ~
1.首先,在移动端,手指点击一个元素,会经过:touchstart --> touchmove --> touchend -->click。
在temlate里面写长按事件(@touchstart.prevent:触摸开始 touchend.prevent:触摸结束,手指离开时)
<ul> <li v-for="(item,idx) in addressList" :key="idx" @touchstart.prevent="touchin(item)" @touchend.prevent="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> <p class="edit" @click="add(item)">编辑</p> </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) { console.log(item) // 再次清空定时器,防止重复注册定时器 clearInterval(this.loop) this.Loop = setTimeout(function () { MessageBox.confirm(‘确认删除吗?‘).then(res => { this.addressList.splice(item, 1) }).catch(() => { }) }.bind(this), 1000) }, /* * 将每次手指移出之后将计时器清零 */ cleartime (idx) { clearInterval(this.Loop) } }
3.2.这是我接好后台接口时候的数据,方便我自己看,你们看上面那个然后自己套数据就好了(当然不套自己项目的数据也是能实现功能的~)
methods: {/* * 长按显示删除地址 */ touchin (item) { console.log(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 (idx) { clearInterval(this.Loop) } }