首页 > web前端 > uni-app > uniapp如何实现长按删除

uniapp如何实现长按删除

coldplay.xixi
发布: 2023-01-13 00:44:22
原创
7699 人浏览过

uniapp实现长按删除的方法:使用组件确定删除,代码为【this.Loop = setTimeout(function() {uni.showModal({title: '删除',content: '请问要删除本条消息吗?',】。

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>
登录后复制

2、script代码

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);
},
登录后复制

相关免费学习推荐:php编程(视频)

以上是uniapp如何实现长按删除的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板