成果を達成する コードは次のとおりです 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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Mybatis mysqlの削除操作では、最初のデータメソッドのみを削除できます。
>>: Alibaba Cloud Docker Yum ソースを使用した Docker 17.03.2 の CentOS7 オンラインインストールの詳細説明
概要プロジェクトは正常に作成され、正常にデプロイされましたが、以下に示すように、Tomcat サーバ...
問題の説明私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブル...
この記事では、トークンログイン認証を実装するためのVUEの具体的なコードを例として紹介します。具体的...
Ubuntu 20.04は2020年4月に正式にリリースされました。本日、ミラーシステムを正式にイン...
ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...
1. Howdyをインストール: howdyプロジェクトアドレス sudo add-apt-repo...
概要バックグラウンド管理システムには多くのフォーム要件があります。データをjson 形式で書き込み、...
目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...
序文ビューは、データベース システム内で非常に便利なデータベース オブジェクトです。 MySQL 5...
XML スキーマは、DTD に代わる XML ベースのものです。 XML スキーマは、DTD に代わ...
私は CentOS に実装された LDAP ユーザー管理を使用しています。これはインターネット上のほ...
1. 新しいユーザーwwweee000を作成します [root@localhost ~]# user...
目次1. 接続管理2. オプティマイザレベルでの改善3. 機能の改善4. パフォーマンススキーマの最...
目次背景glibc 2.14をコンパイルするソフトリンクを変更するやっと背景テスト環境には Cent...
1.MySQLレプリケーションの概念これは、プライマリ データベースの DDL および DML 操作...