How to implement long press deletion in uniapp-uni-app-php.cn

How to implement long press deletion in uniapp

coldplay.xixi

Release： 2023-01-13 00:44:22

Original

7680 people have browsed it

Uniapp implements long press deletion method: use the component to confirm deletion, the code is [this.Loop = setTimeout(function() {uni.showModal({title: 'Delete',content: 'Would you like to delete this article? Message?',].

How to implement long press deletion in uniapp

##The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, thinkpad t480 computer.

Recommended (free): uni-app development tutorial

Uniapp's method of long press deletion:

1. View code

<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>

Copy after login

2. Script code

touchstart(index) {
　　let that = this;
　　clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
　　　　this.Loop = setTimeout(function() {
　　　　　　uni.showModal({
　　　　　　　　title: &#39;删除&#39;,
　　　　　　　　content: &#39;请问要删除本条消息吗？&#39;,
　　　　　　　　success:async function(res) {
　　　　　　　　　　if (res.confirm) {
　　　　　　　　　　　　var id = that.list[index].id
　　　　　　　　　　　　let data = await that.$http.post(&#39;api/shop/shop_qualification_image/delete&#39;,{
　　　　　　　　　　　　&#39;id&#39;:id,
　　　　　　　　　　}).then(function(data){
　　　　　　　　　　　　console.log(&#39;用户点击确定&#39;)
　　　　　　　　　　}).catch(function(data){});
　　　　　　　　} else if (res.cancel) {
　　　　　　　　　　console.log(&#39;用户点击取消&#39;)
　　　　　　　　}
　　　　　　}
　　　　});
　　}.bind(this), 1000);
},
touchend() {
　　clearInterval(this.Loop);
},

Copy after login

Related free learning recommendations:
php Programming(Video)

The above is the detailed content of How to implement long press deletion in uniapp. For more information, please follow other related articles on the PHP Chinese website!