收货地址的删除方式可能有很多种,我目前见过的暂时只有两种(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)
}
}

VUE: 移动端长按弹出确认删除地址(后面测试发现IOS有BUG,后面有更新随笔,更新后的亲测有效)的更多相关文章

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

    之前有一篇文章也写了长按弹出确认框的功能,在android机上测试过完全没问题,到后面整体测试时发现IOS这个功能长按移除就消失了, 除非长按不松手,用另外一只手点击确定才能完成操作,所以这次做了修改 ...

  2. 【Vue | ElementUI】Vue离开当前页面时弹出确认框实现

    Vue离开当前页面时弹出确认框实现 1. 实现目的 在某种业务场景下,用户不允许跳转到其他页面.于是,需要在用户误操作或者是点击浏览器跳转时提示用户. 2. 实现原理 使用路由守卫beforeRout ...

  3. C#编程中,在页面上如何弹出确认删除对话框

    对于页面完成一个操作后,弹出一个对话框提示是否“操作成功”.举例如下:Response.Write("<script>alert('删除成功!')</script>& ...

  4. 实现对gridview删除行时弹出确认对话框的一种简单方法

    在VS2008提供的GridView中我们可以直接添加一个CommandField删除列:<asp:CommandField ShowDeleteButton="True" ...

  5. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  6. [转]js中confirm实现执行操作前弹出确认框的方法

    原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...

  7. Android ListView两种长按弹出菜单方式

    转自:http://www.cnblogs.com/yejiurui/p/3247527.html package com.wyl.download_demo; import java.util.Ar ...

  8. js在关闭页面前弹出确认提示【转载】

    最近项目中出现个bug,就是导出数据后,会提示确认导航,其实实际需求并不需要这个提示,可能是之前遗留的问题.查了下资料是在触发了onbeforeunload事件,那么剩下的就是代码组织问题了. 众所周 ...

  9. C# GridView Edit & Delete, 点击Delete的时候弹出确认框

    1. 使用GridView自带属性ShowEditButton和ShowDeleteButton,均设为True  <Columns> ... <asp:CommandField S ...

随机推荐

  1. java水题集

    POJ - 1220 进制转换 import java.io.*; import java.util.*; import java.math.*; public class Main { public ...

  2. curl put方式上传文件

    发送端 <?php function curlPut($destUrl, $sourceFileDir, $headerArr = array(), $timeout = 10) { $ch = ...

  3. CentOS7下使用ELK搭建日志集中分析平台

    应用场景: ELK实际上是三个工具的集合,ElasticSearch + Logstash + Kibana,这三个工具组合形成了一套实用.易用的监控架构,很多公司利用它来搭建可视化的海量日志分析平台 ...

  4. the specified service is marked as deletion,can not find the file specified

    使用命令注册windows service sc create CCGSQueueService binpath= "D:\DKX4003\services\xxx.xx.xx\xxx.ex ...

  5. Java实现的基础数据结构

    Java实现的基础数据结构 0,常用的基础数据结构 图1 基础数据结构&相关特性 图2 Java自带的类集框架&继承关系图 1,数组[Array] 特点:长度固定.查找方便[直接使用i ...

  6. Winform_chart控件_心得

    效果图: 1.首先,在工具箱找到chart控件,拖到窗体中. 2.关于chart控件的细节设计: series集合设计: chartType可以选择折线图.柱状图.圆饼图等等. isValueShow ...

  7. 爬虫中什么是requests

    print(response.text) #响应的信息 print(response.headers) #获取响应头 print(response.status_code) #响应状态码 print( ...

  8. 最全MySQL面试题和答案

    Mysql 的存储引擎,myisam和innodb的区别. 答: 1.MyISAM 是非事务的存储引擎,适合用于频繁查询的应用.表锁,不会出现死锁,适合小数据,小并发. 2.innodb是支持事务的存 ...

  9. Oracle学习笔记:窗口函数

    目录 1.测试数据 2.聚合函数+over() 3.partition by子句 4.order by子句 5.序列函数 5.1 分析函数之 ntile 5.2 分析函数之 row_number 5. ...

  10. vue入门:(组件)

    模板:(template)模板声明了数据和最终展现给用户的DOM之间的映射关系. 初始数据:(data)一个组件的初始数据状态.对于可复用的组件来说,通常是私有的状态. 接收外部参数:(props)组 ...