首頁  >  文章  >  web前端  >  uniapp如何實現長按刪除

uniapp如何實現長按刪除

coldplay.xixi
coldplay.xixi原創
2020-12-14 11:07:347629瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn