goods组件显示的区域是固定的，也没有滚动条，所以是采用绝对布局的，左右分为menu栏和foods栏，左边固定布局，右边自适应布局，采用flex布局。

写CSS样式的时候，尽量用class，少用tag，因为class的查找效率优于tag，尤其是嵌套层级比较多的时候。左边的menu栏有些是一行有些是多行，要做到不管单行还是多行都是垂直是居中，可以用display：table，table布局是实现垂直居中的有效布局。menu-item设置display:table,text设置display:table-cell,vertical-align:center

<ul>
  <li v-for="(item, index) in goods" class="menu-item" :class="{‘current‘:currentIndex===index}" @click="selectMenu(index, $event)">
    <span class="text border-1px">
　　<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
　　{{item.name}}
    </span>
  </li>
</ul>

右边的food栏用两个<ul v-for="XXX">来实现遍历

每个食品的显示分为左边icon和右边的content，用flex布局来实现，左边固定宽度，右边自适应布局。goods组件的右边的food栏，除了最后一个食品的下面都有1px的border，要去掉最后一个食品的border，课程中是在mixin中写了一个border-none()的样式，把after的伪类设置为display：none。也可以用另一种方式来实现，由于border是通过after伪类来实现的，那么如果给最后一个食品的after伪类设置为border:none应该就可以去掉border了。

border-none()
  &:after
    display: none

food-item设置了18px的margin，但是由于相邻两个food-item的上下margin是会重合的，所以要再设置一个padding-bottom，但是最后一个food-item就会有一个18px的margin-bottom和18px的padding-bottom，所以最后一个fodd-tiem的margin-bottom要设置为0。

.food-item
  display: flex
  margin: 18px
  padding-bottom: 18px
  border-1px(rgba(7, 17, 27, 0.1))

用better scroll库实现滚动效果， new BScroll（）有两个参数，第一个是dom对象，第二个是可选对象。给dom对象增加ref属性，<div class="foods-wrapper" ref="menuWrapper">，在js中用this.$refs获取dom对象，this.meunScroll = new BScroll(this.$refs.menuWrapper, {});

DOM对象是异步更新的，所以要把滚动的初始化函数放在￥nextTick()函数中，$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

要实现左边的menu和右边的food的连动，要计算出右边每一个类的food的高度区间，用getElementsByClassNames获取每一个类food的DOM对象，用函数clientHeight得到的DOM对象的高度。

_calculateHeight() {
  let foodList = this.$refs.foodsWrapper.getElementsByClassName(‘food-list-hook‘);
  let height = 0;
  this.listHeight.push(height);
  for (let i = 0; i < foodList.length; i++) {
    let item = foodList[i];
    height += item.clientHeight;
    this.listHeight.push(height);
  }

}

然后拿到实时的y值与高度区间值对比，在BScroll函数中传入参数probeType:3就可以获取实时滚动的位置，用this.foodsscroll.on()监听滚动事件

this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
  click: true,
  probeType: 3
});
this.foodsScroll.on(‘scroll‘, (pos) => {
  this.scrollY = Math.abs(Math.round(pos.y));
  });
},

当food栏滚动时，获取当前的坐标，与区间对比，得到对应的index，更新左边的menu栏，对应index的menu-item会获得一个current的class。用better Scroll之后，点击时会有两个事件，一个是浏览器原生事件，一个是better Scroll派发的时间，其中浏览器原生事件都没有_constructed属性,better scroll派发的事件有_constructed属性。

<li v-for="(item, index) in goods" class="menu-item" :class="{‘current‘:currentIndex===index}" @click="selectMenu(index, $event)">

computed: {
  currentIndex() {
    for (let i = 0; i < this.listHeight.length; i++) {
      let height1 = this.listHeight[i];
      let height2 = this.listHeight[i + 1];
      if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
        return i;
      }
    }
    return 0;
  }
}

点击左边的menu列表时，根据index，通过scrollToElement把右边的列表滚动到对应的位置

selectMenu(index, event) {
  if (!event._constructed) {
    return;
  }
  let foodList = this.$refs.foodsWrapper.getElementsByClassName(‘food-list-hook‘);
  let el = foodList[index];
  this.foodsScroll.scrollToElement(el, 300);
},

购物车组件开发

5.goods商品列表页开发