Vue外卖项目的学习（6）

异步显示先显示初始数据，再显示处理过数据

这里一开始是空对象，异步获取到信息，才让它显示，所以才会报错，

这里必须用v-if来解决 v-if是直接干掉这一块，v-show是解析了，但是不显示

<div class="shop-header-discounts" v-if="info.supports">
      <div class="discounts-left">
        <div class="activity " :class="supportClasses[info.supports[0].type]">
    <span class="content-tag">

总结规律：3级表达式才会报错，info.supports[0]这样的相当于.0

动画效果

这里感觉记不住，用的时候现找用法吧，容易忘记

&.fade-enter-active,&.fade-leave-active
        transition opacity .5
&.fade-leave-active,&.fade-leave-to
        opacity 0

使用better-scroll实现回弹滑动

和前面轮播一样的思想，数据更新完，列表显示后才创建，之前用的watch和$nextTick，现在换一种思路，给action传一个回调函数，

import BScroll from 'better-scroll'

mounted() {
      this.$store.dispatch('getShopGoods', () => {// 数据更新后执行
        this.$nextTick(() => { // 列表数据更新显示后执行
        //列表显示之后创建
		new BScroll('.menu-wrapper') //类名，而且滑动的是ul，不是div哦，只是写在div上而已
         
        })
      })
    }

callback && callback()的意思是判断下callback有没有，因为可以通过watch去写，所以这里可能不会用到callback，避免报错，这样写，如果第一值callback不存在（false），直接返回false，如果第一个值存在，则运行第二个值 callback()

// 异步获取商家商品列表
  async getShopGoods({commit}, callback) {
    const result = await reqShopGoods()
    if (result.code === 0) {
      const goods = result.data
      commit(RECEIVE_GOODS, {goods})
      // 数据更新了, 通知一下组件
      callback && callback()
    }
  },

采集数据

Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
Array.from(btns).forEach(function (item, index) {
console.log(item, index);
});
底下的也起到相同的作用 Array.prototype.slice.call(lis).forEach

这里得到了每一个标题对应的距离数组

这里的li.clientHeight是每一个li自己的高度，值得注意，这里按理来说clientHeight代表当前视口大小才是，先记住吧，这里疑惑，有大佬看到可以解答下

_initTops() {
        // 1. 初始化tops
        const tops = []
        let top = 0
        tops.push(top)
        // 2. 收集
        // 找到所有分类的li
        const lis = this.$refs.foodsUl.getElementsByClassName('food-list-hook')
        Array.prototype.slice.call(lis).forEach(li => {
          top += li.clientHeight
          tops.push(top)
        })

        // 3. 更新数据
        this.tops = tops
        console.log(tops)
      },

注意这里的用的所有的事件都不是原生的，是它自己的
这里通过监听获得了滑动的实时距离
Math.abs(x) 函数返回指定数字 “x“ 的绝对值

// 初始化滚动
      _initScroll() {
        // 列表显示之后创建
        new BScroll('.menu-wrapper', {
          click: true
        })
        this.foodsScroll = new BScroll('.foods-wrapper', {
          probeType: 2,  // 因为惯性滑动不会触发
          click: true
        })

        // 给右侧列表绑定scroll监听
        this.foodsScroll.on('scroll', ({x, y}) => {
          console.log(x, y)
          this.scrollY = Math.abs(y)
        })

这里的感觉是获取到这两个东西就可以当这两个值相等什么的就可以给左侧增加class，来让它动态的显示已经选择的状态，这里是猜测，明天继续