一、scroll Nav组件
==================
1. 概括
使用cube-ui提供的scroll-nav简化了better-scroll的使用，实现左右联动显示分类显示，当点击某一栏会高亮显示，右侧商品列表详细显示在拖动时回有吸附效果。
2. 布局
最外层是一个两栏布局。左侧栏是商品的分类，右侧就是每个分类具体有哪些商品内容。左侧固定宽高，右侧自适应。（flex布局），对于显示：如果超出页面内容会被隐藏，可以实现滚动（position：absolute）。
cube-ui的ScrollNav组件实现左右联动显示分类显示，当点击某一栏会高亮显示，右侧商品列表详细显示在拖动时回有吸附效果。
<div class="goods">
<div class="scroll-nav-wrapper">
<template slot="bar" slot-scope="props">
<cube-scroll-nav-bar
<template slot-scope="props">
<div class="text">
<bubble :num="props.txt.count">
<div class="icon">
<div class="content">
<div class="cart-control-wrapper">
<div class="shop-cart-wrapper">
3. 实现
（1）组件传值
scroll-nav提供了默认插槽，可以写内部的内容。
对于可以传入props，把goods传入data，click设置为false，是因为每一个scroll都会派发事件，可能会出现嵌套从而事件触发两次（也可以使用stop.propegation）。
props: {
data: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
goods: [],
selectedFood: {},
scrollOptions: {
click: false,
directionLockThreshod: 0
}
}
},
（2）动态获取Goods数据
本来是会在created或者mounted生命周期获取，但是这里任何一个声明周期都是不合适的。在评价页面下无需请求商品和商家页面数据，是一种浪费。因此希望数据的请求是在tab切换到该页面时做，其实就是之前的onchange事件在goods组件内部获取数据。Fetch方法是在tab下的onchange中调用。
fetch() {
if (!this.fetched) {
this.fetched = true
getGoods().then((goods) => {
this.goods = goods
})
}
},
methods: {
onChange(current) {
this.index = current
const component = this.$refs.component[current]
component.fetch && component.fetch()
},
}
二、购物车shop-cart组件
====================
1. 概括
购物车shop-cart组件有多种状态：（1）没有购买商品时，购物车全部灰色（2）当购买商品时，购物车右上角回有商品件数，并且会按照商品计算出价格，（3）当达到配送金额会显示“去结算”，不然就显示“还差XX元起送”。其中对于购物车的设计主要使用了flex布局主要维护选择的商品。 Seller会在goods中声明成计算属性。Goods组件会接收一些tab组件传入的props,而tab的数据也是从app.vue中传入的。因此当动态获取seller之后props的获取是一个响应式的，可以一层层通过tab达到goods组件。
2. 布局
分为左块（logo+price+des）和右块（pay），右边的部分宽度固定，左侧自适应的flex布局。左侧有一个购物车logo，显示总金额，配送费部分 右侧结算。
购物车有多种状态：（1）没有购买商品时，购物车全部灰色（2）当购买商品时，购物车右上角回有商品件数，并且会按照商品计算出价格，（3）当达到配送金额会显示“去结算”，不然就显示“还差XX元起送”。
另外当购物车不为空时点击购物车会弹出浮层，显示购买的商品，也可以清空购物车，或者在里面添加或者删除商品。
3. 实现
（1）页面样式
其中logo相对于父元素有超出的部分，因此需要设置宽度和定位。使用relative，并设置top: -10px。 box-sizing: border-box，圆角设置border-radius:50%
（2）组件引入
在goods组件中引入，并做一些绑定。
<div class="shop-cart-wrapper">
<shop-cart
ref="shopCart"
:select-foods="selectFoods"
:delivery-Price="seller.deliveryPrice"
:min-price="seller.minPrice">
Seller会在goods中声明成计算属性。Goods组件会接收一些tab组件传入的props,而tab的数据也是从app.vue中传入的。因此当动态获取seller之后props是一个响应式的，可以一层层通过tab达到goods组件。
computed: {
seller() {
return this.data.seller
},
购物者主要要维护选择的商品。通过props传入。SelectFoods表示已选择的商品，是通过用户选择动态获取的，还有配送费delivery Price和最小起送费minPrice，这两个是直接可以从后台数据拿到。
props: {
selectFoods: {
type: Array,
default() {
return []
}
},
deliveryPrice: {
type: Number,
default: 0
},
minPrice: {
type: Number,
default: 0
},
}
（3）计算属性
1） totalPrice是商品总和，遍历所选择的商品，拿到商品的价格和数量计算而得。
2）TotalCount是计算商品的总数量，便于显示在购物车部分。
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
},
3） payDesc是对于支付的描述：根据totalprice计算，有三种状态（当价格为空，显示“起送价”；当商品总价小与最小起送价，显示“还差XX起送”；其他，显示“去结算”）
4）PayClass当右边的按钮到达结算状态会被点亮，因而控制class的样式显示。
payDesc() {
if (this.totalPrice === 0) {
return ￥${this.minPrice}元起送
} else if (this.totalPrice < this.minPrice) {
const diff = this.minPrice - this.totalPrice
return 还差￥${diff}元起送
} else {
return '去结算'
}
},
payClass() {
if (!this.totalCount || this.totalPrice < this.minPrice) {
return 'not-enough'
} else {
return 'enough'
}
}
三、购物车cart-control组件
=======================
1. 概括
shop-control组件主要分为三个部分（减号 数字 加号），其中点击加号会触发两个动画：（1）cart-control组件的渐出，（2）购物车小球下落动画。
对于（1）：首先，使用v-show控制组件只有商品件数大于零显示。每个按钮维护一个food，并且对于按钮点击绑定add()和decease()事件用于记录商品的数量count。同时在父组件goods中维护计算属性selectFood(),用于计算商品数量，父组件将selectfood作为props传入shop-cart，从而实现两个兄弟组件之间的数据交互。对于过渡动画，使用组件通过v-show驱动。外层偏移内层rotate滚动，从而实现一边偏移一边滚动的渐出效果显示。
2. 布局
主要分为三个部分（减号 数字 加号）减号部分有一个过渡动画
<div class="cartcontrol">
<transition name="move">
<div class="cart-decrease" v-show="food.count>0" @click.stop="decrease">
<span class="inner icon-remove_circle_outline">
<div class="cart-count" v-show="food.count>0">{{food.count}}
<div class="cart-add icon-add_circle" @click.stop="add">
3. 实现
v-show控制显示，当商品大于零才会显示。
（1）添点击事件
对于每个按钮都会接收和维护一个food，当点击添加时触发add()，修改count值（对于vue来说count是我们自己定义的变量，不是data.json的，因此使用要用this.$set()赋值，而不能直接使用this.food.count++）同理decrease()做减法
props: {
food: {
type: Object
}
},
methods: {
add(event) {
if (!this.food.count) {
this.$set(this.food, 'count', 1)
} else {
this.food.count++
}
this.$emit(EVENT_ADD, event.target)
},
decrease() {
if (this.food.count) {
this.food.count--
}
}
}
（2）组件传值和使用
同时goods中需要维护一个计算属性selectFood(),遍历goods对于每一个good下面的food，判断商品数量，从而可以拿到已选商品数组。并将selectfood并且作为props传入shop-cart。（详细可以查看上面购物车组件代码）
selectFoods() {
const ret = []
this.goods.forEach((good) => {
good.foods.forEach((food) => {
if (food.count) {
ret.push(food)
}
})
})
return ret
},
（3）过渡动画的实现
一期：有两个方位的滚动，基础组件要有一个内层组件，外层组件负责平移，内层组件负责滚动。所有的动画都会基于vue的transition过渡动画。添加transition=move
使用transform：translate3D（0，0，0）（3D可以开启硬件加速使得动画更加流畅）transition 0.4s 线性缓动
对于inner的transform：rotate(0)
二期：使用组件name=’’move’通过v-show驱动。对于外层会有一个偏移操作，内层是一个span会有一个rotate滚动效果，从而实现一边偏移一边滚动的渐出效果显示
.cart-decrease
display: inline-block
padding: 6px
opacity: 1
.inner
display: inline-block
line-height: 24px
font-size: $fontsize-large-x
color: $color-blue
transition: all 0.4s linear
transform: rotate(0)
&.move-enter-active, &.move-leave-active
transition: all 0.4s linear
&.move-enter, &.move-leave-active
opacity: 0
transform: rotate(180deg)
四、购物车小球飞入动画
===============
1. 概括
点击shop-control组件的加号会触发两个动画：（1）cart-control组件的渐出，（2）购物车小球下落动画。
对于（2）：设计思路：想象购物车里面有很多隐藏的小球，点击按钮，小球会变到当前点击位置并显示，然后经过一个动画飞入购物车，并且支持多个小球同时在动画。首先定义balls数组用于存放所有小球，属性show默认设置为false。并在shop-cart中定义小球容器，v-show遍历小球，拿到true的小球做动画。并监听几个vue的钩子函数before-enter ，enter ，after-enter来做动画。在beforedrop中拿到点击的位置，并将购物车中的小球显示在该位置。在dropping中触发重绘reflow，并让做动画回到原来位置，从而实现小球下落，动画之后监听transtionend事件，触发afterDrop，修改小球show显示状态为false，回收小球，并将小球元素display设置为null。从而实现了一次小球下落。
2. 实现
问题（1）小球是根据按钮的位置处飞入，落点是购物车（2）连续点击小球动画是不会断的，可以有多个小球在页面上显示。
思路：想象小球都放在购物车里，里面有很多隐藏的小球，点击某一个按钮时，小球会变到当前点击位置，并显示，然后经过一个动画飞入购物车。并且支持多个小球同时存在。
（1）获取按钮位置
首先，点击cart-control触发事件，需要知道按钮的DOM元素。 定义一个事件EVENT_ADD=add，触发一个事件，派发到DOM元素，通过event.target可以拿到按钮。
add(event) {
if (!this.food.count) {
this.$set(this.food, 'count', 1)
} else {
this.food.count++
}
this.$emit(EVENT_ADD, event.target)
},
（2）添加动画触发函数
之后可以在外层goods组件中的监听到事件@onAdd，从而驱动购物车做小球飞入。
<div class="cart-control-wrapper">
<cart-control @add="onAdd" :food="food">
并且修改goods组件中的onAdd(),在函数中驱动drop()方法
onAdd(target) {
this.$refs.shopCart.drop(target)
},
（3）购物车组件中添加drop方法
在购物车shop-cart中定义一个方法drop() ,接收el也就是DOM元素，（按钮的位置）。
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
}
}
},
在goods组件中，拿到shop-cart的引用，添加ref=”shopCart”,并且修改goods组件中的onAdd(),在函数中驱动drop()方法。
<shop-cart
ref="shopCart"
:select-foods="selectFoods"
:delivery-Price="seller.deliveryPrice"
:min-price="seller.minPrice">
因此就完成了点击按钮，驱动shop-cart组件的下落动画。
（4）实现drop()方法 - 添加小球
1）首先，需要购物车中放入一些隐藏的小球。因此，在shop-cart组件中的data中添加一些ball,数组中是对象小球以及状态。
const BALL_LEN = 10
结束
一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！
