Vue プロジェクトは左スワイプ削除機能を実装します (完全なコード)

Vue プロジェクトは左スワイプ削除機能を実装します (完全なコード)

成果を達成する

ここに画像の説明を挿入

コードは次のとおりです

html

<テンプレート>
  <div>
    <div class="biggestBox">
      <ul>
        <!-- data-type=0 削除ボタンを非表示 data-type=1 削除ボタンを表示 -->
        <li class="li_vessel" v-for="(item,index) リスト内 " data-type="0" :key="index">
          <!-- 「touchstart」は指が画面に触れるとトリガーされ、「touchend」は指が画面から離れるとトリガーされ、「capture」はイベントのキャプチャに使用されます -->
          <div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
            <div class="定数">
              <img class="image" :src="item.imgUrl" alt />
              <div class="rightBox">
                <div>{{item.title} } </div>
                <div>{{item.subheading}}</div>
                <div>{{item.faddish}}</div>
                <div>{{item.price}}</div>
              </div>
            </div>
          </div>
          <div class="removeBtn" @click="remove" :data-index="index">削除</div>
        </li>
      </ul>
    </div>
  </div>
</テンプレート>

js

エクスポートデフォルト{
  名前: "インデックス",
  データ() {
    戻る {
      リスト: [
        {
          タイトル: "タイトル1",
          画像URL: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          サブ見出し:「サブ見出し 1」、
          流行語: 「ホットアイテム」
          価格: "¥12.00",
        },
        {
          タイトル: "タイトル2",
          画像URL: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          サブ見出し:「サブ見出し 2」、
          流行語: 「ホットアイテム」
          価格: "¥58.00",
        },
        {
          タイトル: "タイトル3",
          画像URL: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          サブ見出し:「サブ見出し 3」、
          流行語: 「ホットアイテム」
          価格: "¥99.99",
        },
        {
          タイトル: "タイトル4",
          画像URL: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          サブ見出し:「サブ見出し4」、
          流行語: 「ホットアイテム」
          価格: "¥88.32",
        },
        {
          タイトル: "タイトル5",
          画像URL: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          サブ見出し:「サブ見出し 5」、
          流行語: 「ホットアイテム」
          価格: "¥9999.99",
        },
      ]、
      startX: 0, //スライド開始 endX: 0, //スライド終了};
  },
  メソッド: {
    // 左にスワイプすると削除ボタンが表示されるので、商品情報エリアをクリックして削除をキャンセルします。
      if (this.checkSlide()) {
        this.restSlide();
      } それ以外 {
        // 製品情報をクリックすると、警告ボックス ("hello Word!") がポップアップ表示されます。
      }
    },
    //スライド開始touchStart(e) {
      //初期位置を記録します this.startX = e.touches[0].clientX;
    },
    //スライド終了touchEnd(e) {
      // 現在のスライドの親要素 let parentElement = e.currentTarget.parentElement;
      // 終了位置を記録する this.endX = e.changedTouches[0].clientX;
      // 左スライド距離が30より大きい場合は削除します if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
        this.restSlide();
        親要素.データセット.タイプ = 1;
      }
      // 右にスワイプ if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
        this.restSlide();
        親要素.データセット.タイプ = 0;
      }
      this.startX = 0;
      this.endX = 0;
    },
    // スライダーがスライド状態にあるかどうかを確認します checkSlide() {
      listItems = document.querySelectorAll(".li_vessel"); とします。
      (i = 0 とします; i < listItems.length; i++) {
        リストアイテム[i].データセット.タイプ == 1の場合{
          true を返します。
        }
      }
      false を返します。
    },
    //スライド状態をリセットする restSlide() {
      listItems = document.querySelectorAll(".li_vessel"); とします。
      // リセット for (let i = 0; i < listItems.length; i++) {
        リストアイテム[i].データセット.タイプ = 0;
      }
    },
    //データ情報を削除するremove(e) {
      // 現在のインデックス値 let index = e.currentTarget.dataset.index;
      // リセット this.restSlide();
      // 配列リスト内のデータを削除します。this.lists.splice(index, 1);
    },
  },
};

CS

<スタイル>
* {
  /* デフォルトの内側と外側の余白を削除します*/
  マージン: 0;
  パディング: 0;
}
体 {
  背景: rgb(246, 245, 250);
}
.biggestBox{
  overflow: hidden; /*超過部分は非表示*/
}
ul {
  /* ul のデフォルトスタイルを削除する */
  リストスタイル: なし;
  パディング: 0;
  マージン: 0;
}

.li_容器{
  /* すべてのスタイルで 0.2 秒のイージング*/
  遷移: すべて 0.2 秒;
}
/* =0 非表示 */
.li_vessel[データ型="0"] {
  変換: translate3d(0, 0, 0);
}
/* =1 ディスプレイ */
.li_vessel[データ型="1"] {
  /* -64px の設定が大きいほど、左にスワイプできる距離が長くなります。下の削除ボタンの幅と配置距離と同じ値に設定するのが最適です */
  変換: translate3d(-64px, 0, 0);
}
/* 削除ボタン */
.li_vessel .removeBtn {
  幅: 64ピクセル;
  高さ: 103px;
  背景: #ff4949;
  フォントサイズ: 16px;
  色: #fff;
  テキスト配置: 中央;
  行の高さ: 22px;
  位置: 絶対;
  上: 0px;
  右: -64px;
  行の高さ: 103px;
  テキスト配置: 中央;
  境界線の半径: 2px;
}
/* 左画像スタイル*/
.定数{
  overflow: hidden; /*画像による浮き上がりを解消*/
  パディング: 10px;
  背景: #ffffff;
}

.定数 .画像 {
  幅: 80ピクセル;
  高さ: 80px;
  境界線の半径: 4px;
  フロート: 左;
}
/* 右側のテキスト情報スタイル*/
.rightBox{
  オーバーフロー: 非表示;
  左パディング: 8px;
}
.rightBox div:最初の子 {
  フォントの太さ: 太字;
}
.rightBox div:n番目の子(2) {
  上マージン: 4px;
  フォントサイズ: 14px;
}
.rightBox div:n番目の子(3) {
  幅: 24px;
  背景: rgb(219, 91, 113);
  色: 白;
  フォントサイズ: 12px;
  テキスト配置: 中央;
  パディング: 2px 4px 2px 4px;
  左マージン: 自動;
}
.rightBox div:最後の子 {
  色: 赤;
  フォントサイズ: 14px;
  フォントの太さ: 太字;
}
</スタイル>

完全なコードは次のとおりです。

<テンプレート>
  <div>
    <div class="biggestBox">
      <ul>
        <!-- data-type=0 削除ボタンを非表示 data-type=1 削除ボタンを表示 -->
        <li class="li_vessel" v-for="(item,index) リスト内 " data-type="0" :key="index">
          <!-- 「touchstart」は指が画面に触れるとトリガーされ、「touchend」は指が画面から離れるとトリガーされ、「capture」はイベントのキャプチャに使用されます -->
          <div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
            <div class="定数">
              <img class="image" :src="item.imgUrl" alt />
              <div class="rightBox">
                <div>{{item.title} } </div>
                <div>{{item.subheading}}</div>
                <div>{{item.faddish}}</div>
                <div>{{item.price}}</div>
              </div>
            </div>
          </div>
          <div class="removeBtn" @click="remove" :data-index="index">削除</div>
        </li>
      </ul>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "インデックス",
  データ() {
    戻る {
      リスト: [
        {
          タイトル: "タイトル1",
          画像URL: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          サブ見出し:「サブ見出し 1」、
          流行語: 「ホットアイテム」
          価格: "¥12.00",
        },
        {
          タイトル: "タイトル2",
          画像URL: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          サブ見出し:「サブ見出し 2」、
          流行語: 「ホットアイテム」
          価格: "¥58.00",
        },
        {
          タイトル: "タイトル3",
          画像URL: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          サブ見出し:「サブ見出し 3」、
          流行語: 「ホットアイテム」
          価格: "¥99.99",
        },
        {
          タイトル: "タイトル4",
          画像URL: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          サブ見出し:「サブ見出し4」、
          流行語: 「ホットアイテム」
          価格: "¥88.32",
        },
        {
          タイトル: "タイトル5",
          画像URL: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          サブ見出し:「サブ見出し 5」、
          流行語: 「ホットアイテム」
          価格: "¥9999.99",
        },
      ]、
      startX: 0, //スライド開始 endX: 0, //スライド終了};
  },
  メソッド: {
    // 左にスワイプすると削除ボタンが表示されるので、商品情報エリアをクリックして削除をキャンセルします。
      if (this.checkSlide()) {
        this.restSlide();
      } それ以外 {
        // 製品情報をクリックすると、警告ボックス ("hello Word!") がポップアップ表示されます。
      }
    },
    //スライド開始touchStart(e) {
      //初期位置を記録します this.startX = e.touches[0].clientX;
    },
    //スライド終了touchEnd(e) {
      // 現在のスライドの親要素 let parentElement = e.currentTarget.parentElement;
      // 終了位置を記録する this.endX = e.changedTouches[0].clientX;
      // 左スライド距離が30より大きい場合は削除します if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
        this.restSlide();
        親要素.データセット.タイプ = 1;
      }
      // 右にスワイプ if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
        this.restSlide();
        親要素.データセット.タイプ = 0;
      }
      this.startX = 0;
      this.endX = 0;
    },
    // スライダーがスライド状態にあるかどうかを確認します checkSlide() {
      listItems = document.querySelectorAll(".li_vessel"); とします。
      (i = 0 とします; i < listItems.length; i++) {
        if (listItems[i].dataset.type == 1) {
          true を返します。
        }
      }
      false を返します。
    },
    //スライド状態をリセットする restSlide() {
      listItems = document.querySelectorAll(".li_vessel"); とします。
      // リセット for (let i = 0; i < listItems.length; i++) {
        リストアイテム[i].データセット.タイプ = 0;
      }
    },
    //データ情報を削除するremove(e) {
      // 現在のインデックス値 let index = e.currentTarget.dataset.index;
      // リセット this.restSlide();
      // 配列リスト内のデータを削除します。this.lists.splice(index, 1);
    },
  },
};
</スクリプト>

<スタイル>
* {
  /* デフォルトの内側と外側の余白を削除します*/
  マージン: 0;
  パディング: 0;
}
体 {
  背景: rgb(246, 245, 250);
}
.biggestBox{
  overflow: hidden; /*超過部分は非表示*/
}
ul {
  /* ul のデフォルトスタイルを削除する */
  リストスタイル: なし;
  パディング: 0;
  マージン: 0;
}

.li_容器{
  /* すべてのスタイルで 0.2 秒のイージング*/
  遷移: すべて 0.2 秒;
}
/* =0 で非表示 */
.li_vessel[データ型="0"] {
  変換: translate3d(0, 0, 0);
}
/* =1 ディスプレイ */
.li_vessel[データ型="1"] {
  /* -64px の設定が大きいほど、左にスワイプできる距離が長くなります。下の削除ボタンの幅と配置距離と同じ値に設定するのが最適です */
  変換: translate3d(-64px, 0, 0);
}
/* 削除ボタン */
.li_vessel .removeBtn {
  幅: 64ピクセル;
  高さ: 103px;
  背景: #ff4949;
  フォントサイズ: 16px;
  色: #fff;
  テキスト配置: 中央;
  行の高さ: 22px;
  位置: 絶対;
  上: 0px;
  右: -64px;
  行の高さ: 103px;
  テキスト配置: 中央;
  境界線の半径: 2px;
}
/* 左画像スタイル*/
.定数{
  overflow: hidden; /*画像による浮き上がりを解消*/
  パディング: 10px;
  背景: #ffffff;
}

.定数 .画像 {
  幅: 80ピクセル;
  高さ: 80px;
  境界線の半径: 4px;
  フロート: 左;
}
/* 右側のテキスト情報スタイル*/
.rightBox{
  オーバーフロー: 非表示;
  左パディング: 8px;
}
.rightBox div:最初の子 {
  フォントの太さ: 太字;
}
.rightBox div:n番目の子(2) {
  上マージン: 4px;
  フォントサイズ: 14px;
}
.rightBox div:n番目の子(3) {
  幅: 24px;
  背景: rgb(219, 91, 113);
  色: 白;
  フォントサイズ: 12px;
  テキスト配置: 中央;
  パディング: 2px 4px 2px 4px;
  左マージン: 自動;
}
.rightBox div:最後の子 {
  色: 赤;
  フォントサイズ: 14px;
  フォントの太さ: 太字;
}
</スタイル>

以上が、Vue の左スワイプ削除機能の実装の詳細内容です。Vue の左スワイプ削除の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • VueプロジェクトのWebPackパッケージングによりコメントとコンソールが削除される
  • Vue プロジェクトで rimraf dev を使用するときに dist ディレクトリを削除する方法
  • vue-cli プロジェクトで mockjs を使用する詳細な説明 (データを削除するためのデータ要求)
  • Vueプロジェクトの問題と解決策は削除できません

<<:  Mybatis mysqlの削除操作では、最初のデータメソッドのみを削除できます。

>>:  Alibaba Cloud Docker Yum ソースを使用した Docker 17.03.2 の CentOS7 オンラインインストールの詳細説明

推薦する

アイデアがWebプロジェクトを公開した後、Tomcatサーバーがプロジェクトとそのソリューションを見つけることができません

概要プロジェクトは正常に作成され、正常にデプロイされましたが、以下に示すように、Tomcat サーバ...

Vue プロジェクトで垂直テーブルを 2 つの方法で実装するアイデアの分析

問題の説明私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブル...

VUEはトークンログイン認証を実装

この記事では、トークンログイン認証を実装するためのVUEの具体的なコードを例として紹介します。具体的...

Ubuntu 20.04にvncserverをインストールする方法

Ubuntu 20.04は2020年4月に正式にリリースされました。本日、ミラーシステムを正式にイン...

DockerにELKをインストールしてJSON形式のログ分析を実装する方法

ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...

Ubuntuで顔認識ログインを実装するための完全な手順

1. Howdyをインストール: howdyプロジェクトアドレス sudo add-apt-repo...

Vueダイナミックフォームの詳細な応用

概要バックグラウンド管理システムには多くのフォーム要件があります。データをjson 形式で書き込み、...

JQuery を放棄すべきでしょうか?

目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...

MySQL ビューの紹介と基本操作のチュートリアル

序文ビューは、データベース システム内で非常に便利なデータベース オブジェクトです。 MySQL 5...

W3C チュートリアル (8): W3C XML スキーマのアクティビティ

XML スキーマは、DTD に代わる XML ベースのものです。 XML スキーマは、DTD に代わ...

LDAP ユーザー認証を使用するように Linux を構成する方法

私は CentOS に実装された LDAP ユーザー管理を使用しています。これはインターネット上のほ...

Centos 7 sshd の変更 | ルートログインの禁止と sshd ポートスクリプトの定義

1. 新しいユーザーwwweee000を作成します [root@localhost ~]# user...

MySQL 8.0.24 リリースノートのいくつかの改善点

目次1. 接続管理2. オプティマイザレベルでの改善3. 機能の改善4. パフォーマンススキーマの最...

CentOS6 アップグレード glibc 操作手順

目次背景glibc 2.14をコンパイルするソフトリンクを変更するやっと背景テスト環境には Cent...

MySQLのレプリケーションの詳細な分析

1.MySQLレプリケーションの概念これは、プライマリ データベースの DDL および DML 操作...