ホームページ >ウェブフロントエンド >uni-app >uniappで長押し削除を実装する方法

uniappで長押し削除を実装する方法

coldplay.xixi
coldplay.xixiオリジナル
2020-12-14 11:07:347680ブラウズ

Uniapp は長押し削除メソッドを実装します。コンポーネントを使用して削除を確認します。コードは [this.Loop = setTimeout(function() {uni.showModal({title: '削除',content: 'Would youこの記事を削除しますか? メッセージ?',].

uniappで長押し削除を実装する方法

##このチュートリアルの動作環境: Windows 7 システム、uni-app2.5.1 バージョン、thinkpad t480 コンピューター。

おすすめ(無料): uni-app開発チュートリアル

Uniappの長押し削除方法:

1. コードを表示

<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. スクリプト コード

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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。