成果を達成する コードは次のとおりです 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 オンラインインストールの詳細説明
目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...
目次1. Dockerファイル2. pom 構成3. イメージプッシュ4. k8s デプロイメント前...
序文クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要があり...
目次序文1. 準備2. インストール3. 環境変数を設定する1. 「新規」をクリックすると、ポップア...
ある達人がかつて、自分の妻のことを知るのと同じくらい、自分が管理するデータベースのことを知るべきだと...
JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...
序文最近、オンラインでデータが誤って操作されました。データベースが直接変更されたため、それを回復する...
Linux での Tomcat の起動とシャットダウンLinux システムでは、コマンド操作を使用し...
序文docker run がコンテナを作成して実行するときに、-p を使用してポート マッピング ル...
ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....
このチュートリアルでは、UbuntuにMySQL 5.7.10を手動でインストールする手順を参考まで...
1. Webプロジェクトを作成したら、Tomcatを例にサーバーを構成する必要があります。 2. 実...
Cockpit は、CentOS および RHEL システムで使用できる Web ベースのサーバー管...
最近、たまたまこの小さな要件に遭遇しました。昔、JS を使用してこれを処理したことを覚えていますが、...
MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...