一、项目目录
二、项目运行截图
1.首页
2.详情页
三、具体实现
(一)tabbar的封装
1.将商城底部tabbar抽离成TabBar与TabBarItem两个独立的组件。
2.通过插槽将TabBarItem组件插入到TabBar中。
3.为TabBarItem中的根标签div绑定Click事件，通过计算属性判断当前界面路径是否与路由一致，从而决定tabbar的颜色显示：对应当前页面的TabBarItem显示深粉色，非当前页面的显示深灰色。
(二)首页数据的请求
1.通过axios向服务器请求数据
2.Home页请求数据
3.在轮播图中展示请求到的图片
4.TabControl组件的封装
原理与TabBar组件的封装相似。其中需要注意的是父子组件之间的通信。
子组件向父组件传递信息需要通过$emit()传送事件与参数。
5.商品数据的请求与展示
(1)抽离出GoodsList与GoodsListItem组件，分别用于商品列表、具体商品的展示。
(2)在home.js中封装getHomeGoods函数
(3)在Home.Vue中调用getHomeGoods函数，来动态获取对应的商品列表数据。
(4)将获取到的商品展示在首页。
三、页面滚动的优化
由于原生的滚动在移动端经常卡顿，所以引入Better Scroll插件进行优化。
1.创建Scoll.vue组件，导入BScroll。
2.在Home.vue中导入Scroll.vue组件，并通过设置ref值，使Home.vue父组件可以通过this.$refs.获取子组件。
3.将scoll组件的pull-up-load属性设置为"true"，监听上拉事件，并绑定loadMore函数，以完成“上拉加载更多”功能。
四、解决可滚动区域的问题
Better Scroll中的属性scrollHeight是根据在Better Scroll中子组件的高度来计算的。
但在首页中，如果网络较慢，商品图片没有立刻加载出来时，图片的高度不会计入scrollHight中。
而在图片加载完成后，scrollHeight不会更新。从而导致可滚动区域有时不能正常滚动的问题。
解决方法：
Vue中监听: @load=‘方法’
在GoodsListItem组件中使用imageLoad函数来监听图片是否加载完成，如果加载完成，则执行一次Better Scroll的refresh函数。
其中，GoodsListItem与Home非父子组件之间的传值，通过事件总线来实现。
但同时带来另一个问题，refresh函数执行太过频繁，会加重浏览器负担。
解决方法：防抖。将refresh放入防抖函数中，并设置延迟时间，从而解决refresh函数执行过于频繁的问题。
五、BackTop组件的封装
BackTop：回到顶部。
1.在Home.vue中监听BackTop的点击事件，使用Better Scroll中的scrollTo函数使页面滚动到顶部。
2.只有在页面下拉到一定程度时才显示“回到顶部”。
如果觉得《android 仿蘑菇街效果 Vue项目-仿蘑菇街移动端Web开发》对你有帮助，请点赞、收藏，并留下你的观点哦！
