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>

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)은 메뉴(p), 식품(p), 장바구니(장바구니 컴포넌트)를 포함하는 컴포넌트입니다. 그 중 음식에는 카트컨트롤(즉, 작은 공 성분)이 포함됩니다

구성요소 간 통신: 설명: 메뉴 및 항목

질문 1: 작은 공은 클릭한 제품의 수량을 얻어야 합니다.

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

해결책:

글로벌 Vue를 가져옵니다.

Vue.set(target,key,value)를 사용하여 대상 개수를 등록하세요.

질문 2: 공을 클릭하고 클릭한 제품 수를 장바구니에 전달하세요.

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

장바구니는 과거에 전달된 데이터에서만 작동하기 때문입니다(변경되지 않음). 따라서 상위 구성 요소를 동기화할 필요가 없습니다.

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

장바구니에 담긴 공이 포물선 운동을 합니다. 우선 착지점은 장바구니에 있고, 공은 랜덤입니다. 포물선 운동을 하려면 +를 클릭해야 합니다. 숫자의 x,y 위치입니다. 둘째, 포물선 운동은 enter--> enter-to 및 Leave--> to 동안에만 발생합니다. 마침표가 없으므로 Vue에서 제공하는 Hook 기능을 이용하셔야 합니다.

Get + 숫자 x,y 위치:

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

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

Vue에서 제공하는 Hooks

여기서 주의할 점은 Vue가 공식 웹사이트에 있다는 점입니다. js가 너무 많은 js의 경우 done을 추가하면 after-enter 메서드가 실행되지 않습니다.
또 다른 질문이 있습니다. Vue 공식 웹사이트에서는 전환 효과만 사용할 것을 권장합니다. 전환 애니메이션이 진행되는 요소에 v-bind:class='false'를 추가하세요. 이전에 추가하지 않았는데 공이 첫 번째 클릭에서만 전환 효과를 낼 수 있는 것으로 나타났습니다.                                         나는 당신이 이 기사를 읽는 방법을 마스터했다고 믿습니다. 더 흥미진진한 내용을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

추천 도서:

Vue.js의 구성 요소 사용에 대한 자세한 설명

mysql 연결 풀에서 트랜잭션 자동 재활용을 사용하는 방법(코드 포함)

위 내용은 vue를 이용하여 장바구니에 담긴 작은 공의 포물선 효과에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!