实战Vue：基于Vue的移动端购物商城

import Swiper2, {Navigation, Pagination, Autoplay} from ‘swiper’;

Swiper2.use([Navigation, Pagination, Autoplay]);

4. 如果想在组件中使用或者控制轮播图，可以在监听computer中对swiper进行监听，并在组件的其他地方使用。

5. 将首页的数据传输到轮播图组件中，并进行渲染

（4）中部导航nav

1. 在home子文件夹components内新建子文件夹nav，并在nav文件夹中新建Nav.vue

2. 将静态界面放在Nav.vue中，并在Home.vue中引入

3. 将Home.vue中请求到的数据通过props传递到Nav.vue，并进行遍历展示

（5）限时抢购

1. 在home子文件夹components内新建子文件夹flashSale，并在flashSale文件夹中新建FlashSale.vue和FlashSaleItem.vue

2. 将静态界面放在FlashSale.vue和FlashSaleItem.vue中，并在FlashSale中引入FlashSaleItem，在Home.vue中引入FlashSale

3. 将Home.vue中请求到的数据通过props传递到FlashSale.vue，再传递到FlashSaleItem.vue，并进行遍历展示

（6）配置猜你喜欢静态界面

1. 在home子文件夹components内新建子文件夹youLike，并在youLike文件夹内新建YourLike.vue和YourLikeItem.vue

2. 将静态界面放在YourLike.vue和YourLikeItem.vue中，并在YourLike中引入YourLikeItem，在Home.vue中引入YourLike

3. 将Home.vue中请求到的数据通过props传递到YourLike.vue，再传递到YourLikeItem.vue，并进行遍历展示

（7）返回顶部组件

1. 在home子文件夹components内新建子文件夹markPage，并在markPage文件夹内新建MarkPage.vue

2. 将返回顶部SVG静态页面放到MarkPage.vue中，并在Home.vue中引入

3. 在父组件Home.vue中定义事件，并以props的方式传递给MarkPage.vue。并通过属性showBackStatus控制MarkPage是否显示。

4. 判断是否显示返回顶部按钮是一个可能全局都要使用的事件。所以将其抽出来。

① 在config文件夹中，新建global.js

② 在global.js中写滚动、触摸监听代码，并在满足条件的时候执行回调函数。

③ 在Home.vue中，引入global.js，并在created钩子中进行监听，通过判断是否需要显示返回顶部按钮，设置showBackStatus值，控制是否需要显示。

④ 在global.js中，写缓动函数

⑤ 在Home.vue中引入animate动画，并在点击事件中调用。

10. 配置分类界面

---

（1）新建文档

新建一下文件目录，并在对应子文件下新建vue组件

（2）在created钩子中请求数据

1. 首先，要在server文件夹下的api文件夹下的index.js中，封装数据请求方法

2. 在界面中引入接口，并使用async 和 await将异步函数转化为同步函数执行后续操作

（3）将Header.vue作为单独组件，在Category.vue中引入

（4）左侧推荐导航栏

1. 左侧推荐导航栏基本没有扩展性，直接在Catergory.vue中写即可。同时，借助better-scroll进行滚动。

2. 对请求下来的数据进行遍历，动态加载渲染左侧li标签

3. 处理左侧推荐导航栏点击事件

① 导航栏样式处理

选中样式绑定在selected类上，通过对不同li标签删除添加class为selected即可实现更换

样式

通过给li标签绑定点击事件，更改currentIndex来更改当前具有selected类名的li标签，同时借助better-scroll中的控制滚动位置，同时，获取新的右侧数据