Vue 2.0에서 장바구니 공 포물선을 구현하는 방법
- 亚连원래의
- 2018-06-08 14:11:071826검색
이 글에서는 주로 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는 메뉴(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'를 추가하세요. 이전에 추가하지 않았는데 공이 첫 번째 클릭에서만 전환 효과를 낼 수 있는 것으로 나타났습니다.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
vue에서 하위 구성 요소 이벤트를 트리거하기 위해 상위 구성 요소 클릭을 구현하는 방법
위 내용은 Vue 2.0에서 장바구니 공 포물선을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!