ホームページ > 記事 > ウェブフロントエンド > Vue 2.0 でショッピング カート ボール放物線を実装する方法
この記事では主に vue 2.0 ショッピング カート ボール パラボラのサンプル コードを紹介します。
この記事では、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('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'; } } }
getBoundingClientRect()。方法はこちらの記事をご覧ください http://www.jb51.net/article/134208.htm
説明:
goodsはmenu(p)、foods(p)、shopcart(ショッピングカートコンポーネント)を含むコンポーネントです)。その中には、食品にはカートコントロール (つまり、小さなボールコンポーネント) が含まれます
コンポーネント間の通信: 説明: メニューと商品
最初の質問: 小さなボール、クリックされた商品の数を取得する必要があります。
Vue の小道具を使用して、食べ物の値をカートコントロールに渡します。しかし、これには問題があります。つまり、子コンポーネントは更新されても、親コンポーネントに同期させることはできません。さらに、子コンポーネントでは食品に対して count 属性が登録されており、この属性を親コンポーネント (商品) に同期させることはできません。
解決策:
グローバル Vue をインポートします。
Vue.set(target, key, value); を使用してターゲットの数を登録します。
2 番目の質問: ボールをクリックし、クリックされた商品の数をショップカートに渡します。
商品の computed:{} でメソッドを定義し、そのメソッドを props の形式で shopcart に渡します。
なぜなら、shopcart は渡されたデータに対してデータ操作を実行するだけです (データは変更されません)。したがって、親コンポーネントを同期する必要はありません。
質問 3: ショッピング カートのボールは放物線運動をします。
ショッピングカートのボールは放物線運動をします。まず、着地点はショッピングカート内にあり、ボールはランダムです。放物線運動を行うには、クリックした + 記号の x、y 位置を取得する必要があります。次に、放物線運動は Enter-> Enter-to 期間中にのみ使用可能であり、Leave-> Leave-to 期間には使用できないため、Vue が提供するフック関数を使用する必要があります。
Get + 数値 x、y 位置:
小さなボール (cartcontrol) はサブコンポーネントです。データを商品 (親コンポーネント) に渡す必要があります。 Vuex を使用することも、イベント バスを直接使用することもできます。 「Are You Hungry?」のデモイベントバスを直接使用してください。
空の Vue を作成します。 cartcontrol で、Bus.$emit(key, ... arg); を通じてリスナーを登録し、親コンポーネントを使用して Bus.$on(key, function(... arg)); を通じてこのメソッドをリッスンします。操作した dom オブジェクトを渡すだけです
Vue が提供するフック
ここで注意すべき点は、過剰な js の場合のみ、done が必要であるということです。 enterメソッドは実行できません。
別の質問があります。Vue 公式 Web サイトでは、トランジション アニメーションを実行する要素に v-bind:class='false' を追加することを推奨しています。以前は追加していませんでしたが、ボールは最初のクリックでのみトランジション効果を実行できます。
上記は私があなたのためにまとめたものです。
関連記事:
vueで親コンポーネントのクリックを実装して子コンポーネントのイベントをトリガーする方法
以上がVue 2.0 でショッピング カート ボール放物線を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。