vue高仿商城web App（supermail）源码解析
vue全家桶打造高仿商城项目，真实服务器数据
已在github上开源，源码地址可见最后
项目展示：
首页开发：
- 顶部购物街标题
- 轮播图
- 本周流行
- 【流行，新款，精选】导航栏
- 商品的展示
顶部标题：
每一个界面都有这个标题，唯一不同的地方在于：左右两侧可能存在有其他内容，所以
封装一个公共的navbar.vue组件，使用slot插槽进行替换其内容
轮播图：
使用封装好的 swiper 组件
本周流行：
单独的一张图片
导航栏：
分类中也存在这样的导航栏，所以独立封装一个tabControl.vue组件
因为布局是一样，只有内容不一样，所以采用 prop 传值的形式进行封装
商品的展示：
无论是首页中的商品展示还是分类中或是详情页的推荐中的商品展示的布局都是一样的。 封装goods组件
Bug：
1.better-scroll 滚动过程中有时无法继续向下滚动？
better-scroll 可滚动局域的问题？
better-scroll在决定有多少区域可以滚动时，是根据scrollHeight属性决定
scrollHeight属性是根据放better-scroll的content中的子组件的高度所决定
但是我们的首页中，刚开始计算scrollHeight属性时，是没有将图片计算在内的
所以，计算出来的值是错误的
后来图片加载进来之后有了新的高度，但是scrollHeight属性并没有更新
所以滚动出现了问题。
如何解决这个问题？
监听每一张图片是否加载完成，只要有一张图片加载完成了执行 refresh() 方法 ，refresh() ：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
如何监听图片加载完成了？
原生js的监听图片： img标签中有个onload事件用于监听图片加载完成
vue中监听图片： img 标签中 @load="方法" ：用于监听图片的加载完成
goods-list-item中的图片加载完成事件，如何通知到scroll组件中进行refresh方法？
通过 事件总线 this.$bus ；需要自己在vue的原型上增加 $bus: Vue.prototype.$bus = new Vue()
this.$bus.$emit('发送的事件名称',携带的参数)
this.$bus.$on('接收事件名称',(参数)=>{})
事件总线渗透问题？
离开当前组件时，关闭事件总线 ： this.$bus.off('事件名称',事件函数)
2.详情页 bug ：Error in render: "TypeError: Cannot read property '0' of undefined"
数据请求成功，也返回了对应的值。goodsDetail.detailImage[0].key 是有值的。但是报undefined错误？
因为是props传递数据：刚开始传递过来的goodsDetail还是一个空对象，当请求过来数据时，才对这个数据插入到这个组件中，可是，组件在之前就要被展示出来，所以出错，虽然界面没有影响
在组件根元素中进行判断，当数据还是一个空对象时，这个组件不被创建，
v-if="Object.keys(goodsDetail).length !== 0"
3.添加商品进入购物车后，购物车界面无法滚动？
添加商品后，进入购物车界面，此时scroll计算的可滚动的区域还是空的，需要进行refresh
4.共用goods组件 Error in render: "TypeError: Cannot read property 'img' of undefined"
当组件复用，一些属性不同时，使用计算属性匹配对应的属性
5.在一定的位置距离离开首页在回到首页滚动到回顶部？
better-scroll 插件 在scrollTo函数中做了一些改变，导致滚动回顶部，并不是没有记录保存起来的组件状态
降低better-scroll版本 由当前的1.15.2版本降至1.13.2
卸载： npm uninstall better-scroll
指定安装版本 ： npm install [email protected]
功能代码：
tabControl的吸顶效果？
必须知道滚动到多少时，开始有吸顶效果，这个时候就需要获取到tabControl的offsetTop值
但是，如果直接在mounted中获取tabControl的offsetTop，那么值是不正确的
如何获取正确的offsetTop的值？
监听图片的加载完成，加载完成后，发出事件，再获取正确的值
监听滚动，动态的改变tabControl的样式
（因为在better-scroll中，是根据transition设置滚动的，所以需要在better-scroll外层在来个tabControl，进行替换）
来达到tabControl看上去吸顶的效果
通过组件对象.$el 获取组件对象中的DOM元素，在通过.offsetTop获取距离顶部的高度
详情页顶部标题与内容的联动效果？
1.点击标题，滚动到指定内容的位置
获取到所有标题对应的组件的offsetTop，依次存在一个数组，即可通过数组的索引值进行对应的滚动
如何获取正确的offsetTop？
* 1.created 不行，不能获取元素，DOM没有渲染
* 2.mounted 不行，数据可能没有获取到
* 3.在获取到数据后的回调中不行，DOM还没有渲染完
* 4.$nextTick也不行，因为图片的高度没有计算在内
* 5. 在图片加载完成后，获取的offsetTop才是正确的高度
监听图片加载完成，在图片加载完成后，将对应的组件的offsetTop值依次加入一个数组中，当对标题进行点击时，滚动到当前这个数组中对应的索引值
2.监听滚动，实现对应的标题**
向数组中追加一个无穷大的值（Number.MAX_VALUE）
// 假设scrollCorrelationY = [ 0,1000,2000,3000,∞ ]
// positionY 大于0 并且小于等于1000 时 设置 $refs.navbar.currentIndex = 0
// positionY 大于1000 并且小于等于2000 时 设置 $refs.navbar.currentIndex = 1
// positionY 大于2000 并且小于等于3000 时 设置 $refs.navbar.currentIndex = 2
// positionY 大于3000 到 无穷大时 设置 $refs.navbar.currentIndex = 3
通过循环 ，正是对应的i值设置给当前的index（currentIndex）
backTop 返回顶部？
1.监听滚动的距离，当滚动到某一个位置时，显示backTop
2.点击backTop，滚动回顶部，隐藏backTop
多个界面都需要返回顶部？
mixin 混入：可将公共的代码进行抽离共用
utils下建立mixin.js
只需要在需要使用到backTop的地方导入，并mixin即可
添加购物车Toast提示？
1.对Toast的封装
2.点击加入购物车，保存到Vuex之后才应该出现提示
改造Actions的addCart方法，返回一个Promise实例，即可通过then进行对应的操作