硅谷外卖项目day04

day04

项目地址

一、ShopGoods组件

1、动态展现列表数据

• 使用mock.js模拟商品数据，实现列表数据展现

2、实现基本列表滑动

• 使用better-scroll

1. 功能：
   • 实现两个列表滑动
   • 凸显当前分类
   • 当滑动右侧列表时，更新当前分类
   • 点击某个分类项，右侧列表滑动到对应的位置
2. 分析：
   • 类名：current类样式标识当前分类
   • 设计一个计算属性：currentIndex，当分类项到此节点，显示current样式
   • 根据哪些数据计算？
     • scrollY：右侧活动的Y坐标轴(滑动过程是实时变化的)
     • tops： 所有右侧分类li的top组成的数组（列表第一次显示后就不再变化）
3. 编码：
   • 在滑动过程中，实时收集scrollY
   • 在列表第一次显示后，收集tops
   • 实现currentIndex的计算逻辑

(1)实现列表滑动

import BScroll from "better-scroll"
mounted() {
    this.$store.dispatch("getShopGoods", () => {
      //数据更新后执行
      this.$nextTick(() => {
        this._initScroll();
        this._initTops();
      });
    });
  },
methods: {
    //TODO: methods里放事件相关的函数，加‘_’是为了与事件函数区分开
    //初始化滚动
    _initScroll() {
      //列表显示之后创建
      this.menuScroll = 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);
      });
      // 给右侧列表绑定scroll结束的监听
      this.foodsScroll.on("scrollEnd", ({ x, y }) => {
        // console.log("scrollEnd", x, y);
        this.scrollY = Math.abs(y);
      });
    }

  }

(2)凸显当前分类，当滑动右侧列表时，更新当前分类

• 当右侧滑动的每个导航在客户区高度顶部时，左侧的菜单栏同步高亮

(3)点击某个分类项，右侧列表滑动到对应的位置

二、CartControl组件，商品加减组件

1. 问题：更新状态数据, 对应的界面不变化

• 原因： 一般方法给一个已有绑定的对象中添加一个新的属性, 这个属性没有数据绑定
• 解决:
  • Vue.set(obj, 'xxx', value)才有数据绑定
  • this.$set(obj, 'xxx', value)才有数据绑定

三、ShopCart组件，购物车组件

1. 使用vuex管理购物项数据: cartFoods
2. 解决几个功能性bug
   • 是什么时候显示和关闭购物车列表
   • 如何计算需要多少元起送

四、Food组件，食物详情组件

1. 父子组件：
   • 子组件调用父组件的方法: 通过props将方法传递给子组件
   • 父组件调用子组件的方法: 通过ref找到子组件标签对象