ホームページ ウェブフロントエンド jsチュートリアル vueを使用したショッピングカート内の小さなボールの放物線効果の詳細な説明

vueを使用したショッピングカート内の小さなボールの放物線効果の詳細な説明

Apr 13, 2018 am 09:31 AM
放物線 効果 ショッピングカート

今回は、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>
ログイン後にコピー
CSS コード (スタイラス書き込みメソッドを使用)

.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
ログイン後にコピー
jsコード

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(&#39;inner-hook&#39;)[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';
   }
  }
}
ログイン後にコピー
getBoundingClientRect()。この記事を読んでください http://www.jb51.net/article/134208.htm

説明:

Goods は、menu(p)、food(p)、shopcart (ショッピング カート コンポーネント) を含むコンポーネントです。その中には、食品にはカートコントロール (つまり、小さなボールのコンポーネント) が含まれます

コンポーネント間の通信:

説明: メニューと製品

質問 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する Apr 03, 2024 am 08:13 AM

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

Javaで簡単なショッピングカート機能を実装するにはどうすればよいですか? Javaで簡単なショッピングカート機能を実装するにはどうすればよいですか? Nov 02, 2023 am 11:56 AM

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

九州風神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル 九州風神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル Mar 28, 2024 am 11:11 AM

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

春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です 春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です Apr 17, 2024 pm 05:07 PM

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

Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度 Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度 Mar 28, 2024 pm 03:20 PM

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

PHPモール開発スキル:ショッピングカートや注文同期機能の設計 PHPモール開発スキル:ショッピングカートや注文同期機能の設計 Jul 30, 2023 pm 07:22 PM

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

Colorful Hidden Star P15 24 レビュー:見た目も性能も兼ね備えたハードコアなオールラウンドゲーミングノートPC Colorful Hidden Star P15 24 レビュー:見た目も性能も兼ね備えたハードコアなオールラウンドゲーミングノートPC Mar 06, 2024 pm 04:40 PM

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

RedisとJavaScriptを使ってショッピングカート機能を実装する方法 RedisとJavaScriptを使ってショッピングカート機能を実装する方法 Sep 21, 2023 pm 01:27 PM

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

See all articles