老师为什么我的小球只能从底部右边飞入？
来源：5-4 小球飞入动画实现
lcyjerry
2020-06-08
3回答
-
lcyjerry
提问者
2020-06-08
已解决
00 -
ustbhuangyi
2020-06-08
你把代码传到 GitHub 上，我抽空帮你看看
022020-06-08 -
lcyjerry
提问者
2020-06-08
<template>
<div>
<div class="shopcart">
<div class="content" @click="toggleList">
<div class="content-left">
<div class="logo-wrapper">
<div class="logo" :class="{ highlight: totalCount > 0 }">
<i
class="icon-shopping_cart"
:class="{ highlight: totalCount > 0 }"
></i>
</div>
<div v-show="totalCount > 0" class="num">
{{ totalCount }}
</div>
</div>
<div class="price" :class="{ highlight: totalCount > 0 }">
¥{{ totalPrice }}
</div>
<div class="desc">另需配送费 ¥{{ deliveryPrice }}元</div>
</div>
<div class="content-right" @click.stop.prevent="pay">
<div :class="payClass" class="pay">
{{ payDesc }}
</div>
</div>
</div>
<div class="ball-container">
<div v-for="(ball, index) in balls" :key="index">
<transition
@before-enter="beforeDrop"
@enter="dropping"
@after-enter="afterDrop"
>
<div class="ball" v-show="ball.show">
<div class="inner inner-hook"></div>
</div>
</transition>
</div>
</div>
<transition name="fold">
<div class="shopcart-list" v-show="listShow">
<div class="list-header">
<h1 class="title">购物车</h1>
<span class="empty" @click="empty">清空</span>
</div>
<div class="list-content" ref="listContent">
<ul>
<li
class="food"
v-for="(food, index) in selectFoods"
:key="index"
>
<span class="name">{{ food.name }}</span>
<div class="price">
<span>¥{{ food.price * food.count }}</span>
</div>
<div class="cartcontrol-wrapper">
<cartcontrol :food="food"></cartcontrol>
</div>
</li>
</ul>
</div>
</div>
</transition>
</div>
<transition name="fade">
<div class="list-mask" v-show="listShow" @click="hideList"></div>
</transition>
</div>
</template>
<script>
import cartcontrol from "components/cartcontrol/cartcontrol";
import BScroll from "@better-scroll/core";
const BALL_LEN = 10;
function createBalls() {
let ret = [];
for (let i = 0; i < BALL_LEN; i++) {
ret.push({
show: false,
});
}
return ret;
}
export default {
data() {
return {
fold: true,
balls: createBalls(),
};
},
components: {
cartcontrol,
},
props: {
selectFoods: {
type: Array,
default() {
return [];
},
},
deliveryPrice: {
type: Number,
default: 0,
},
minPrice: {
type: Number,
default: 0,
},
},
computed: {
totalPrice() {
let total = 0;
this.selectFoods.forEach((food) => {
total += food.price * food.count;
});
return total;
},
totalCount() {
let count = 0;
this.selectFoods.forEach((food) => {
count += food.count;
});
return count;
},
payDesc() {
if (this.totalPrice === 0) {
return `¥${this.minPrice}元起送`;
} else if (this.totalPrice < this.minPrice) {
let diff = this.minPrice - this.totalPrice;
return `还差¥${diff}元起送`;
} else {
return "去结算";
}
},
payClass() {
if (this.totalPrice < this.minPrice) {
return "not-enough";
} else {
return "enough";
}
},
listShow() {
if (!this.totalCount) {
this.fold = true;
return false;
}
let show = !this.fold;
if (show) {
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.listContent, {
click: true,
});
} else {
this.scroll.refresh();
}
});
}
return show;
},
},
created() {
this.dropBalls = [];
},
methods: {
toggleList() {
if (!this.totalCount) {
return;
}
this.fold = !this.fold;
},
empty() {
this.selectFoods.forEach((food) => {
food.count = 0;
});
},
hideList() {
this.fold = true;
},
pay() {
if (this.totalPrice < this.minPrice) {
return;
} else {
window.alert(`支付${this.totalPrice}元`);
}
},
drop(el) {
for (let i = 0; i < this.balls.length; i++) {
const ball = this.balls[i];
if (!ball.show) {
ball.show = true;
ball.el = el;
this.dropBalls.push(ball);
return;
}
}
},
beforeDrop(el) {
const ball = this.dropBalls[this.dropBalls.length - 1];
const rect = ball.el.getBoundingClientRect();
const x = rect.left - 32;
const y = -(window.innerHeight - rect.top - 22);
el.style.display = "";
el.style.transform = el.style.webkitTransform = `translate3d(0,${y}px,0)`;
const inner = el.getElementsByClassName("inner-hook")[0];
inner.style.transform = el.style.webkitTransform = `translate3d(${x}px,0,0)`;
},
dropping(el, done) {
this._reflow = document.body.offsetHeight;
el.style.transform = el.style.webkitTransform = `translate3d(0,0,0)`;
const inner = el.getElementsByClassName("inner-hook")[0];
inner.style.transform = el.style.webkitTransform = `translate3d(0,0,0)`;
el.addEventListener("transitionend", done);
},
afterDrop(el) {
const ball = this.dropBalls.shift();
if (ball) {
ball.show = false;
el.style.display = 'none';
}
},
},
};
</script>
00
相似问题