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

今回は、Vueでショッピングカートの小さなボール放物線効果を実装する方法について詳しく説明します。Vueでショッピングカートに小さなボール放物線を実装する方法の注意事項は何ですか。実際のケースを見てみましょう。

この記事では、vue 2.0 ショッピング カート ボール パラボラのサンプル コードを紹介し、皆さんと共有します。詳細は次のとおりです。 注: このプロジェクトは、「Are You Hungry?」をモデルにしています。最新のVueを使用しているのですが、動画内の記述方法が一部放棄されています。

レイアウトコード

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