尚硅谷外卖项目笔记二

1. 商家整体界面搭建

2. 模拟(mock)数据/接口

3. vue transition动画

4. 滚动实现（better-scroll）

5. 滚动右边食物列表，同步更新左侧菜单

6. 点击左侧列表项, 右侧滑动到对应位置

8. 父组件调用子组件的方法（ref）

9. 列表过滤显示

10 项目优化

11 打包可视化

1. 商家整体界面搭建

搭建整个商家的界面，拆分界面路由。路由包含一级路由（点餐、评价、商家）

2. 模拟(mock)数据/接口

商家页面的数据使用mock数据来模拟从后台获取的数据

2.1 安装

npm install mockjs

2.2 编写JSON数据

商家页面主要有点餐、评价、商家三个数据

在JSON文件中，存放这三个数据，编写数据的时候要注意数据的格式（对象还是数组）。

以key：value的形式放到JSON文件中

2.3 引入mock

创建一个js文件，在文件中引入Mock，编写每个数据对应的接口

在main.js 中引入上面的js文件

2.4 使用mock数据

在接口文件中添加三个ajax请求

其余的步骤就是在页面请求分发vuex的actions事件，actions提交ajax请求，请将获取的数据commit到mutation，mutation改变state中的数据。

3. vue transition动画

给商家信息详情添加一个动画效果：点击的时候，渐渐的出现商家详情，点击取消，渐渐地消失

 <transition name="fade"><!--这里放需要做动画的内容--></transition>

在style中设置动画的样式

设置离开的时候透明度为0，即完全看不到

&.fade-enter-active,&.fade-leave-activetransition opacity .5s
&.fade-enter,&.fade-leave-toopacity 0

4. 滚动实现（better-scroll）

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window)的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。

4.1 安装

npm install @better-scroll/core --save

4.2 引入

import BScroll from '@better-scroll/core

4.3 创建scroll对象

注意：创建scroll对象应该在获取数据之后，这与scroll的实现原理有关。

当数据没有加载的时候，content中的内容即没有超过其外层div，那么创建了scroll对象也不能滑动。只有在content内容超过其外层div，创建的scroll对象才能进行滚动。

以滑动食品列表为例子。

首先，创建一个函数，创建scroll对象

 _initScroll(){this.foodsScroll=new BScroll('.foods-wrapper',{probeType:2,  //因为惯性滑动不会触发click:true})}

在获取数据之后，通过一个回调函数和nextTick来调用创建scroll对象的函数

this.$store.dispatch('getShopGoods',()=>{//数据更新之后创建一个下拉对象this.$nextTick(()=>{this._initScroll()this._initTops()})})

better-scroll中还提供了其他的方法：

如监听滚动，可以用于实现滚动到对应的食品，左边菜单栏显示对应的菜单

监听惯性滑动的结束，以更新左边选中的菜单

5. 滚动右边食物列表，同步更新左侧菜单

思路：

1. 使用一个类名：current表示当前分类，即当current为true时，对应的菜单是选中的样式

2. 设计一个计算属性， currentIndex，计算当前菜单应该在第几个

计算思路：

获取右边每类食物对应的li，遍历每个li，获取其窗口高度，初始top为0，每遍历一个都让top加上，并保存到top数组中，这样，就获得了每种食物对应的li的高度

 //初始化tops_initTops(){//1. 初始化topsconst tops=[]let top=0tops.push(top)//2. 收集  找到所有分类的liconst lis=this.$refs.foodsUrl.getElementsByClassName('food-list-hook')Array.prototype.slice.call(lis).forEach(li=>{top+=li.clientHeighttops.push(top)})//3. 更新数据this.tops=tops},

实时监听滚动的高度（Y轴坐标）

绑定两个监听事件是因为其中一个是监听惯性滑动的结束，因为选择的滚动类型为2，不包括惯性滚动，因此，还需要监听惯性滚动结束时的Y轴坐标

//右侧列表绑定scroll监听 监听坐标this.foodsScroll.on('scroll',({x,y})=>{this.scrollY=Math.abs(y)})//右侧列表绑定scroll结束的监听this.foodsScroll.on('scrollEnd',({x,y})=>{this.scrollY=Math.abs(y)})

当滚动的高度处于当前的tops中某两个高度之间时，就找到了对应的index

currentIndex(){//得到条件的数据const {scrollY,tops}=this//根据条件计算产生一个结果const index=tops.findIndex((top,index)=>{return scrollY >= top && scrollY < tops[index + 1]})//返回结果return index;}

6. 点击左侧列表项, 右侧滑动到对应位置

  //监听菜单点击事件clickMenuItem(index){//使右侧列表滑动到对应的位置//先得到目标位置const scrollY=-this.tops[index]//立即更新scrollY，更新当前分类this.scrollY=scrollY//平滑到对应位置this.foodsScroll.scrollTo(0,scrollY,300)},

7. 新增动态绑定的数据

当点击添加食物时，食物会添加一个count属性，以记录添加食物的数量

[INCREMENT_FOOD_COUNT](state, {food}) {if(!food.count){//第一次到购物车//food.count=1 //新增属性，没有数据绑定效果Vue.set(food,'count',1) //让新增属性也有数据绑定//将food添加到cartFoods中state.cartFoods.push(food)}else {food.count++}},

8. 父组件调用子组件的方法（ref）

当在父组件点击食物，显示对应的食物详情时，需要调用食物详情组件的toggleShow方法，让该组件显示

//显示点击的foodshowFood(food){//设置food 显示food组件this.food=food//调用子组件对象的方法（父组件中调用子组件对象的方法）this.$refs.food.toggleShow()}

9. 列表过滤显示

评价列表的过滤显示。评价列表需要过滤满意，不满意，全部三种选择，同时还可以选择只看有文本内容的评论

思路：selectType为012分别代表按钮满意，不满意，全部

rateType是评论的一个属性，有0 1 两个值，分别代表满意，不满意

需要同时满足两个条件：

条件一、 selectType=2||selectType===rateType

前者表示选择全部，后者表示选择满意或者选择不满意

条件二、 !onlyShowText || text.length>0

选择不看没有文本内容的或者选择看有文本内容的

filterRatings(){//得到相关的数据const {ratings,onlyShowText,selectType}=this//产生一个过滤新数组return ratings.filter(rating=>{const {rateType, text} = rating//条件一  selectType 0/1/2  rateType 0/1//        selectType=2||selectType===rateType//条件二  onlyShowText true/false   text 有值|没值//        !onlyShowText || text.length>0return (selectType===2||selectType===rateType) && (!onlyShowText || text.length>0)})}

10 项目优化

1. 缓存路由组件对象

<keep-alive></keep-alive>

2. 路由组件懒加载

//路由组件懒加载
const MSite = ()=>import('../pages/MSite/MSite')
const Order = ()=>import('../pages/Order/Order')
const Profile = ()=>import('../pages/Profile/Profile')
const Search = ()=>import('../pages/Search/Search')

当使用当组件的时候，才去调用函数

3. 图片懒加载（vue-lazyload）

1) 安装

npm install --save vue-loader

2) 使用

import VueLazyload from 'vue-lazyload'
//这是一张图片
import loading from './common/imgs/loading.gif'
Vue.use(VueLazyload, { //自定义一个指令lazyloading
})

11 打包可视化

npm run build --report