Vue 2.0에서 장바구니 공 포물선을 구현하는 방법-JS 튜토리얼-php.cn

Vue 2.0에서 장바구니 공 포물선을 구현하는 방법

亚连

풀어 주다： 2018-06-08 14:11:07

원래의

1916명이 탐색했습니다.

이 글에서는 주로 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(&#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 = &#39;translate3d(0,0,0)&#39;;
    el.style.transform = &#39;translate3d(0,0,0)&#39;;
    let inner = el.getElementsByClassName(&#39;inner-hook&#39;)[0];
    inner.style.webkitTransform = &#39;translate3d(0,0,0)&#39;;
    inner.style.transform = &#39;translate3d(0,0,0)&#39;;
   });
  },
  afterDrop(el){
   let ball = this.dropBalls.shift();
   if(ball) {
    ball.show = false;
    el.style.display = &#39;none&#39;;
   }
  }
}

로그인 후 복사

getBoundingClientRect(). 방법은 http://www.jb51.net/article/134208.htm

글을 읽어주세요 설명:

goods는 메뉴(p), 음식(p), shopcart(장바구니 컴포넌트)를 포함하는 컴포넌트입니다. ) . 그중 음식에는 카트컨트롤(즉, 작은 공 구성 요소)이 포함됩니다.

구성 요소 간 통신: 설명: 메뉴 및 제품

첫 번째 질문: 작은 공, 클릭한 제품 수를 얻어야 합니다.

Vue의 소품을 사용하여 음식 값을 cartcontrol에 전달합니다. 하지만 여기에는 문제가 있습니다. 즉, 하위 구성 요소가 업데이트되어 상위 구성 요소와 다시 동기화될 수 없습니다. 또한 하위 구성요소에는 식품에 대한 개수 속성이 등록되어 있으며 이 속성은 상위 구성요소(상품)에 다시 동기화될 수 없습니다.

해결책:

글로벌 Vue를 가져옵니다.

Vue.set(target, key, value);를 사용하여 대상 개수를 등록합니다.

두 번째 질문: 공을 클릭하고 클릭한 제품 수를 장바구니에 전달합니다.

상품의 계산:{}에서 메서드를 정의하고 해당 메서드를 소품 형태로 장바구니에 전달합니다.

쇼핑카트는 전달된 데이터에 대해서만 데이터 작업을 수행하기 때문입니다(변경되지 않음). 따라서 상위 구성 요소를 동기화할 필요가 없습니다.

질문 3: 장바구니 공이 포물선 운동을 합니다.

장바구니 공을 포물선 운동으로 만들어보세요. 우선 착지점은 장바구니에 있고, 공은 랜덤입니다. 포물선 운동을 하려면 클릭한 + 기호의 x, y 위치를 얻어야 합니다. 둘째, 포물선 모션은 enter--> enter-to 기간에만 가능하고, Leave--> Leave-to 기간에는 가능하지 않습니다. 따라서 Vue에서 제공하는 Hook 기능을 이용해야 합니다.

Get + 숫자 x, y 위치:

작은 공(cartcontrol)은 하위 구성 요소입니다. 데이터는 상품(상위 구성요소)으로 전달되어야 합니다. Vuex를 사용하거나 이벤트 버스를 직접 사용할 수 있습니다. 배고프신가요? 데모 이벤트 버스를 직접 사용하세요.

빈 Vue를 만듭니다. cartcontrol에서 Bus.$emit(key, ... arg);를 통해 리스너를 등록한 다음 부모 구성 요소를 사용하여 Bus.$on(key, function(... arg));을 통해 이 메서드를 수신합니다. 조작된 DOM 객체를 전달하세요

Vue에서 제공하는 후크

여기서 한 가지 주목해야 할 점은 Vue가 공식 웹사이트에 있다는 것입니다. 과도한 js에 대해서만 done을 추가해야 합니다. Enter 메소드를 실행할 수 없습니다.
또 다른 질문이 있습니다. Vue 공식 웹사이트에서는 전환 효과만 사용할 것을 권장합니다. 전환 애니메이션이 진행되는 요소에 v-bind:class='false'를 추가하세요. 이전에 추가하지 않았는데 공이 첫 번째 클릭에서만 전환 효과를 낼 수 있는 것으로 나타났습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.