# 基于Vue实现的仿蘑菇街商城App
**Repository Path**: junjiangLi/supermall
## Basic Information
- **Project Name**: 基于Vue实现的仿蘑菇街商城App
- **Description**: 基于Vue实现的仿蘑菇街移动端商城项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-06-09
- **Last Updated**: 2022-07-04
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 基于Vue实现的仿蘑菇街商城App
### 1.项目简介
后端由接口提供数据，接口已经过服务器部署，前端基于Vue实现的移动端应用
项目已经完成大部分页面展示与较多功能实现
项目预览地址： **[点我点我](http://106.52.112.127:3434/dist/#/home)**
电脑端预览时，要F12打开控制台将设备改为手机，并刷新一下，即可正常访问
**项目仅作学习与交流**
##### 1.1首页
包含轮播图、商品分类控制栏、商品展示卡片、置顶按钮等
| 1 | 2 | 3 |
|---|---|---|
##### 1.2详情页面
包含商品详细信息展示、热门推荐商品展示卡片、置顶按钮、加入购物车功能等
| 1 | 2 | 3 |
|---|---|---|
##### 1.3分类页面
包含商品控制栏、商品展示卡片、切换不同分类信息功能等
| 1 | 2 | 3 |
|---|---|---|
##### 1.4购物车页面
包含加购商品展示信息、全选单选功能等
| 1 | 2 | 3 |
|---|---|---|
##### 1.5我的页面
由于没有实现登录注册功能，此页面只做信息展示，感兴趣可自我完善
|  |
|--|
### 2.项目难点
##### 2.1技术栈
- Vue 页面布局、组件封装、页面逻辑等
- vue-router 路由、路由跳转等
- vuex 保存数据、数据共享等
- axios 发送Ajax请求等
##### 2.2项目难点
**分类控制栏(tab-control)的粘性布局**
分类控制栏(tab-control)会随着滑动到顶部而固定，本来可以使用css属性 *position:sticky* 轻松实现，但是为了优化滑动效果，项目引入了better-scroll第三方工具代替原生滚动，使得css属性 *position:sticky* 不起效果了，因此要手动实现分类控制栏(tab-control)的粘性布局。
这里使用了一种比较巧妙的方法：当分类控制栏(tab-control)随着滑动到顶部，到达要求固定的地方时，会出现一个新的分类控制栏(tab-control)并遮掩原分类控制栏(tab-control)，接着原分类控制栏(tab-control)会消失，新分类控制栏(tab-control)会固定定位到顶部，从而在效果上实现与粘性定位效果一样，向上滑动则反之。
这里给出部分代码，具体请参考完整项目所示。
```
contentScroll(position){
// 判断置顶按钮是否显示
this.isShowBackTop = (-position.y) > 1000
// 判断何时把tab-control固定
this.isTabFixed = (-position.y) > this.tabOffsetTop
}
```
```
// 获取tab-control的offsetTop
swiperImageLoad(){
this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
}
```
**详情页顶部导航栏的动态变化和点击滑动到对应区域**
原本统一采用获取位置的方法实现，当点击导航栏条目时，页面滑动到特定位置；当页面滑动到特定位置时， 导航栏对应条目高亮；但是存在一个问题，当页面滑动到某一个位置时，点击导航栏上一个条目时，页面会向上滑动，接着会出现“反复横跳”的效果，这是因为页面当前位置短时间内发生较大变化，执行导航栏->位置、位置->导航栏方法混乱引起的。
这里采用分开控制的方法，当点击导航栏条目时，页面滑动到特定位置，由位置决定；当页面滑动到特定位置时，页面中的一个参数发生变化，参数再决定导航栏对应条目高亮，由对应参数决定，解决了问题。
这里给出部分代码，具体请参考完整项目所示。
```
navItemClick(index) {
// 当顶部导航被点击时
if (index == 0) {
this.$refs.detailScroll.scrollTo(0, -this.swiperOffsetTop);
} else if (index == 1) {
this.$refs.detailScroll.scrollTo(0, -this.detailInfoOffsetTop);
} else if (index == 2) {
this.$refs.detailScroll.scrollTo(0, -this.commentOffsetTop);
} else {
this.$refs.detailScroll.scrollTo(0, -this.recommendOffsetTop);
}
},
```
```
// 根据拖动位置变换nav-bar的index
if (-position.y < this.detailInfoOffsetTop) {
this.mark = 0;
} else if (
-position.y >= this.detailInfoOffsetTop &&
-position.y < this.commentOffsetTop
) {
this.mark = 1;
} else if (
-position.y >= this.commentOffsetTop &&
-position.y < this.recommendOffsetTop
) {
this.mark = 2;
} else if(-position.y >= this.recommendOffsetTop){
this.mark = 3;
}
```
##### 2.3项目优化
- 实现路由懒加载，使首屏渲染速度加快
- 对短时间内频繁进行的操作使用debounce防抖函数，优化性能
- 引入vue-lazyload插件，实现图片懒加载，优化用户体验
- 引入better-scroll第三方工具，代替原生滚动，解决原生滚动存在的一些问题
- 引入fastClick第三方工具，解决移动端300ms延迟的问题，优化用户体验
- 引入并配置了postcss-px-to-viewport第三方工具，能在项目运行时将px单位转化为vw单位，一定程度上实现兼容不同大小的屏幕
### 3.项目运行
clone项目：
```
git clone https://gitee.com/junjiangLi/supermall.git
```
安装项目依赖：
```
yarn
```
项目运行：
```
yarn serve
```