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 オンラインインストールの詳細説明

推薦する

Vue の下部ナビゲーション バー TabBar を実装するための非常に詳細なチュートリアル

目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...

Dockerイメージをパッケージ化し、リモートサーバーにプッシュしてk8sにデプロイする方法

目次1. Dockerファイル2. pom 構成3. イメージプッシュ4. k8s デプロイメント前...

MySQL ページング制限の実用的な最適化

序文クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要があり...

Win10でのJDKのインストールと環境変数の設定に関する詳細なチュートリアル

目次序文1. 準備2. インストール3. 環境変数を設定する1. 「新規」をクリックすると、ポップア...

パフォーマンス負荷診断にMySQLシステムデータベースを使用する方法

ある達人がかつて、自分の妻のことを知るのと同じくらい、自分が管理するデータベースのことを知るべきだと...

JavaScript のカンマ式が含まれている場合について

JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...

MySQL でデータ復旧に binlog を使用する方法

序文最近、オンラインでデータが誤って操作されました。データベースが直接変更されたため、それを回復する...

Linux で Tomcat を実行するいくつかの方法の説明

Linux での Tomcat の起動とシャットダウンLinux システムでは、コマンド操作を使用し...

実行中のDockerコンテナのポートマッピングを変更する方法

序文docker run がコンテナを作成して実行するときに、-p を使用してポート マッピング ル...

Windows 10 インストール vmware14 チュートリアル図

ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....

Ubuntuにmysql5.7.10を手動でインストールする

このチュートリアルでは、UbuntuにMySQL 5.7.10を手動でインストールする手順を参考まで...

Tomcat サーバーの設定と Web プロジェクトの公開に関する IDEA グラフィック チュートリアル

1. Webプロジェクトを作成したら、Tomcatを例にサーバーを構成する必要があります。 2. 実...

CentOS 8/RHEL 8 に Cockpit をインストールして使用する方法

Cockpit は、CentOS および RHEL システムで使用できる Web ベースのサーバー管...

「さらに表示」ボタンによる複数行テキストの切り捨てに関する考察

最近、たまたまこの小さな要件に遭遇しました。昔、JS を使用してこれを処理したことを覚えていますが、...

MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装

MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...