vueを使用したショッピングカート内の小さなボールの放物線効果の詳細な説明
今回は、Vueでショッピングカートの小さなボール放物線効果を実装する方法について詳しく説明します。Vueでショッピングカートに小さなボール放物線を実装する方法の注意事項は何ですか。実際のケースを見てみましょう。
この記事では、vue 2.0 ショッピング カート ボール パラボラのサンプル コードを紹介し、皆さんと共有します。詳細は次のとおりです。 注: このプロジェクトは、「Are You Hungry?」をモデルにしています。最新のVueを使用しているのですが、動画内の記述方法が一部放棄されています。 レイアウトコード<p class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop"> <p v-show="ball.show" class="ball" v-bind:css="false"> <p class="inner inner-hook" ></p> </p> </transition> </p>
.ball-container .ball position fixed left 32px bottom 22px z-index 200 transition all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41) .inner width 16px height 16px border-radius 50% background-color rgb(0,160,220) transition all 0.4s linear
data() { return { balls : [ { show: false }, { show: false }, { show: false }, { show: false }, { show: false } ], dropBalls: [] }; }, methods: { drop(el) { for(let i = 0; i < this.balls.length; i++) { let ball = this.balls[i]; if(!ball.show) { ball.show = true; ball.el = el; this.dropBalls.push(ball); return ; } } } beforeDrop(el) { let count = this.balls.length; while (count--) { let ball = this.balls[count]; if(ball.show) { let rect = ball.el.getBoundingClientRect(); let x = rect.left - 32; let y = -(window.innerHeight - rect.top - 22); el.style.webkitTransform = `translate3d(0,${y}px,0)`; el.style.transform = `translate3d(0,${y}px,0)`; let inner = el.getElementsByClassName('inner-hook')[0]; inner.style.webkitTransform = `translate3d(${x}px,0,0)`; inner.style.transform = `translate3d(${x}px,0,0)`; } } }, dropping(el) { /* eslint-disable no-unused-vars */ let rf = el.offsetHeight; this.$nextTick(() => { el.style.webkitTransform = 'translate3d(0,0,0)'; el.style.transform = 'translate3d(0,0,0)'; let inner = el.getElementsByClassName('inner-hook')[0]; inner.style.webkitTransform = 'translate3d(0,0,0)'; inner.style.transform = 'translate3d(0,0,0)'; }); }, afterDrop(el){ let ball = this.dropBalls.shift(); if(ball) { ball.show = false; el.style.display = 'none'; } } }
コンポーネント間の通信:
説明: メニューと製品質問 1: 小さなボールは、クリックされた製品の数量を取得する必要があります。
Vue の小道具を使用して、食品の値をカートコントロールに渡します。しかし、これには問題があります。つまり、子コンポーネントは更新されても、親コンポーネントに同期させることはできません。さらに、子コンポーネントでは食品に対して count 属性が登録されており、この属性を親コンポーネント (商品) に同期させることはできません。
解決策: グローバル Vue をインポートします。 Vue.set(target,key,value) を使用して target; のカウントを登録します。質問 2: ボールをクリックし、クリックした商品の数をショップカートに渡します。
商品の computed:{} でメソッドを定義し、そのメソッドを props の形式で shopcart に渡します。
ショップカートは過去に渡されたデータのみを操作するためです(データは変更されません)。したがって、親コンポーネントを同期する必要はありません。質問 3: ショッピング カートのボールは放物線運動をします。
ショッピングカートのボールは放物線運動をします。まず、着地点はショッピングカート内にあり、ボールはランダムです。放物線運動を行うには、クリックされた + を取得する必要があります。 数値の X、Y 位置。第 2 に、放物線運動は Enter-> Enter-To および Leave-> Leave-To の間のみ発生します。 ピリオドがないため、Vue が提供するフック関数を使用する必要があります。
X、Y 位置 + 数値を取得:
小さなボール (cartcontrol) はサブコンポーネントです。データを商品 (親コンポーネント) に渡す必要があります。 Vuex を使用することも、イベント バスを直接使用することもできます。 「Are You Hungry?」のデモイベントバスを直接使用してください。
空の Vue を作成します。 cartcontrol で、Bus.$emit(key, ... arg); を通じてリスナーを登録し、親コンポーネントを使用して Bus.$on(key, function(... arg)); を通じてこのメソッドをリッスンします。操作対象の DOM オブジェクトを渡すだけですVue が提供するフック
ここで注意すべき点は、Vue の公式 Web サイトにある、過剰な js のみの場合は、done が必要であるということです。done を追加すると、after enter メソッドが実行できなくなります。 別の質問があります。Vue 公式 Web サイトでは、トランジション アニメーションを実行する要素に v-bind:class='false' を追加することを推奨しています。以前は追加していませんでしたが、ボールは最初のクリックでのみトランジション効果を実行できます。 この記事を読む方法はもうマスターされたと思います。さらに興味をそそられる場合は、PHP 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
Vue.js でのコンポーネントの使用方法の詳細な説明
mysql 接続プールでトランザクション自動リサイクルを使用する方法 (コード付き)
以上がvueを使用したショッピングカート内の小さなボールの放物線効果の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











スマートフォンの画面に緑色の線が表示されるというトラブルに遭遇したことがある方もいると思いますし、見たことはなくても、関連する写真をインターネット上で見たことがあるはずです。では、スマートウォッチの画面が白くなってしまう状況に遭遇したことはありますか? CNMOは4月2日、海外メディアから、Redditユーザーがサムスンウォッチシリーズのスマートウォッチの画面が白くなっている写真をソーシャルプラットフォームで共有したことを知った。ユーザーは、「出発時に充電していましたが、戻ってきたらこのようになっていました。再起動しようとしましたが、再起動プロセス中も画面はまだこのままでした。」Samsung Watch スマートウォッチの画面が白くなりました。 Reddit ユーザーはスマート ウォッチを指定していません。特定のモデルです。しかし、写真から判断すると、Samsung Watch5のはずです。以前、別のRedditユーザーも報告しました

Javaで簡単なショッピングカート機能を実装するにはどうすればよいですか?ショッピング カートはオンライン ストアの重要な機能で、ユーザーが購入したい商品をショッピング カートに追加して商品を管理できるようにします。 Java では、オブジェクト指向のアプローチを使用して、単純なショッピング カート機能を実装できます。まず、製品カテゴリを定義する必要があります。このクラスには、製品名、価格、数量などの属性と、対応する Getter メソッドと Setter メソッドが含まれています。例: publicclassProduct

ASSASSINといえば、プレイヤーの皆さんは必ず『アサシン クリード』に登場するマスターアサシンを思い浮かべると思いますが、彼らは熟練しただけではなく、「闇に身を捧げ、光に仕える」という信条を持っています。 - アプライアンス ブランド DeepCool の冷却ラジエーターが互いに一致します。このたび、シリーズ最新作「ASSASSIN4S」が登場し、上級者に新たな空冷体験をもたらす『スーツの暗殺者 アドバンスト』。外観はディテールに富んでいます. Assassin 4S ラジエーターはダブルタワー構造 + シングルファン内蔵設計を採用しています. 外側は立方体状のフェアリングで覆われており, 全体的な印象が強いです. ホワイトとブラックの2色が用意されています.さまざまな色に合う色。

春の到来とともにあらゆるものが生き返り、あらゆるものが生命力と活力に満ち溢れます。この美しい季節、家庭生活に彩りを加えるにはどうすればよいでしょうか? Haqu H2 プロジェクターは、絶妙なデザインと超コストパフォーマンスで、この春に欠かせない美しさになりました。コンパクトでありながらスタイリッシュなH2プロジェクター。リビングルームのテレビキャビネットの上に置いても、寝室のベッドサイドテーブルの隣に置いても、美しい風景になります。乳白色のマットな質感のボディは、プロジェクターの高級感を演出するだけでなく、触り心地も向上させたデザインです。ベージュのレザー風の素材が全体の外観に温かみとエレガントさを加えます。この色と素材の組み合わせは、現代の住宅の美的傾向に準拠しているだけでなく、住宅に統合することもできます。

コンパクトなサイズで究極の独自の美しさを追求する多くのプレイヤーを魅了するITXプラットフォームは、製造プロセスの改善と技術の進歩により、インテルの第14世代CoreおよびRTX40シリーズのグラフィックスカードの両方がITXプラットフォーム上で強みを発揮することができ、ゲーマーも SFX 電源にはより高い要件があります。ゲーム愛好家である Huntkey は、高性能要件を満たす ITX プラットフォームにおいて、最大 750W の定格電力を備え、80PLUS プラチナ レベルの認証を取得した、新しい MX シリーズ電源を発売しました。以下にこの電源の評価を示します。 Huntkey MX750P フルモジュール電源は、シンプルでファッショナブルなデザインコンセプトを採用しており、プレイヤーに合わせて選択できるブラックとホワイトの 2 つのモデルがあり、どちらもマットな表面処理が施されており、シルバーグレーとレッドのフォントで質感が優れています。

PHPモール開発スキル:ショッピングカートと注文同期機能の設計 モールWebサイトにおいて、ショッピングカートと注文は欠かせない機能です。ショッピング カートはユーザーが製品を購入し、一時的なショッピング カートに保存するために使用されます。一方、注文はユーザーが製品の購入を確認した後に生成されるレコードです。ユーザーエクスペリエンスを向上させ、エラーを減らすためには、ショッピングカートと注文の同期機能を設計することが非常に重要です。 1. ショッピング カートと注文の概念 ショッピング カートは通常、ユーザーが購入した商品を保管するために使用される一時的なコンテナです。ユーザーはショッピング カートに製品を追加して、簡単に閲覧および管理できます。

現在の急速な技術発展の時代において、ラップトップは人々の日常生活や仕事に欠かせない重要なツールとなっています。高いパフォーマンス要件を持つプレーヤーにとって、強力な構成と優れたパフォーマンスを備えたラップトップは、彼らのハードコアなニーズを満たすことができます。 Colorful Hidden Star P15 ノートブック コンピューターは、その優れたパフォーマンスと見事なデザインにより、将来のリーダーとなり、ハードコア ノートブックのモデルと呼ぶことができます。 Colorful Hidden Star P1524 は、第 13 世代インテル Core i7 プロセッサーと RTX4060Laptop GPU を搭載し、よりファッショナブルな宇宙船デザインスタイルを採用し、細部まで優れたパフォーマンスを発揮します。まずはこの手帳の特徴を見ていきましょう。 Supreme は Intel Core i7-13620H 処理を搭載

Redis と JavaScript を使用してショッピング カート機能を実装する方法. ショッピング カートは、電子商取引 Web サイトで非常に一般的な機能の 1 つです。これにより、ユーザーは興味のある商品をショッピング カートに追加でき、ユーザーは閲覧や閲覧が便利になります。購入したアイテムをいつでも管理できます。この記事では、RedisとJavaScriptを使ってショッピングカート機能を実装する方法と、具体的なコード例を紹介します。 1. 準備 開始する前に、Redis がインストールおよび構成されていることを確認する必要があります。これは公式 Web サイト [https:/] から行うことができます。
