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>
</テンプレート>

エクスポートデフォルト{
  名前: "インデックス",
  データ（） {
    戻る {
      リスト: [
        {
          タイトル: "タイトル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);
    },
  },
};

<スタイル>
* {
  /* デフォルトの内側と外側の余白を削除します*/
  マージン: 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 の他の関連記事に注目してください。

以下もご興味があるかもしれません: