uniapp如何实现长按删除

150 阅读 0 评论 99 点赞

我是靠谱客的博主还单身烤鸡，这篇文章主要介绍uniapp如何实现长按删除，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、uni-app2.5.1版本、thinkpad t480电脑。

推荐（免费）：uni-app开发教程

uniapp实现长按删除的方法：

1、view代码

复制代码<view class="imgShow" v-for="(item,index) in list" :key="index">
　　<image :src="item.image_path" @touchstart.prevent="touchstart(index)" @touchend.prevent="touchend"></image>
</view>1
2
3
<view class="imgShow" v-for="(item,index) in list" :key="index">
　　<image :src="item.image_path" @touchstart.prevent="touchstart(index)" @touchend.prevent="touchend"></image>
</view>
登录后复制

2、script代码

复制代码touchstart(index) {
　　let that = this;
　　clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
　　　　this.Loop = setTimeout(function() {
　　　　　　uni.showModal({
　　　　　　　　title: '删除',
　　　　　　　　content: '请问要删除本条消息吗？',
　　　　　　　　success:async function(res) {
　　　　　　　　　　if (res.confirm) {
　　　　　　　　　　　　var id = that.list[index].id
　　　　　　　　　　　　let data = await that.$http.post('api/shop/shop_qualification_image/delete',{
　　　　　　　　　　　　'id':id,
　　　　　　　　　　}).then(function(data){
　　　　　　　　　　　　console.log('用户点击确定')
　　　　　　　　　　}).catch(function(data){});
　　　　　　　　} else if (res.cancel) {
　　　　　　　　　　console.log('用户点击取消')
　　　　　　　　}
　　　　　　}
　　　　});
　　}.bind(this), 1000);
},
touchend() {
　　clearInterval(this.Loop);
},1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
touchstart(index) {
　　let that = this;
　　clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
　　　　this.Loop = setTimeout(function() {
　　　　　　uni.showModal({
　　　　　　　　title: '删除',
　　　　　　　　content: '请问要删除本条消息吗？',
　　　　　　　　success:async function(res) {
　　　　　　　　　　if (res.confirm) {
　　　　　　　　　　　　var id = that.list[index].id
　　　　　　　　　　　　let data = await that.$http.post('api/shop/shop_qualification_image/delete',{
　　　　　　　　　　　　'id':id,
　　　　　　　　　　}).then(function(data){
　　　　　　　　　　　　console.log('用户点击确定')
　　　　　　　　　　}).catch(function(data){});
　　　　　　　　} else if (res.cancel) {
　　　　　　　　　　console.log('用户点击取消')
　　　　　　　　}
　　　　　　}
　　　　});
　　}.bind(this), 1000);
},
touchend() {
　　clearInterval(this.Loop);
},
登录后复制