实战课-仿JD商城

1.瀑布流

image.png

核心概念

• 都是宽度相同但高度不同的item
• item是以从上到下， 从左到右的顺序进行依次排列

2.倒计时（仅限于整点数） 计算距离开场时间的时分秒

methods: {
        /**
         * 计算展示内容
         *  1、当前时间未到开始时间的时候 ： 展示倒计时
        * 2、当前时间到了开始时间的时候：活动进行中
        * 3、当前时间超过开始时间的时候：活动已结束
         */
        computedSurplusTime: function () {
            if (this.interval) {
                clearInterval(this.interval);
            }
            // 当前时间
            const date = new Date();
            /**
             * 当前时间超过开始时间的时候：活动已结束
             */
            if (date.getHours() > this.endHours) {
                this.surplus = '活动已结束';
                return;
            }
            /**
             * 当前时间到了开始时间的时候：活动进行中
             */
            if (date.getHours() === this.endHours) {
                this.surplus = '活动进行中';
                return;
            }
            /**
             * 当前时间未到开始时间的时候 ： 展示倒计时
             * 1、获取当前时间与活动开始时间的秒数差距
             * 2、根据秒数来转化为对应的 -> 时:分:秒
             */
            // 开始时间 16 ， 当前时间 12。 3小时59分59秒
            const diffHours = this.endHours - date.getHours() - 1;
            // 差距分钟数
            const diffMinutes = 60 - date.getMinutes() - 1;
            // 差距秒数
            const diffSeconds = 60 - date.getSeconds();
            // 转化为对应的秒数 -> 1小时 === 3600 
            this.diffSeconds = diffHours * 3600 + diffMinutes * 60 + diffSeconds;
            // 当前时间每过1秒，秒数差距应该 - 1
            this.interval = setInterval(() => {
                this.diffSeconds -= 1;
            }, 1000);
        }
    },
    watch: {
        /**
         * 当 diffSeconds 值发生变化的时候，就会回调当前的方法
         * 根据秒数来转化为对应的 -> 时:分:秒  （3600秒 展示 1:0:0）
         */
        diffSeconds: function (newV) {
            // 当前的秒数  / 3600 ,向下取整，获取到转化的小时数
            const hours = Math.floor(newV / 3600);
            // 当前的秒数 / 60，向下取整，
            // 获取到所有的分钟数 3600 / 60 = 60分钟
            // 对60取模，超过小时数的分钟数
            const minutes = Math.floor(newV / 60) % 60;
            // 当前的秒数 % 60 , 获取到 超过小时数、分钟数的秒数（秒数）
            const seconds = newV % 60;
            // 拼装数据
            this.surplus = hours + ':' + minutes + ":" + seconds;

            /**
             * 在当前秒数 变为 0 ，需要修改展示数据
             */
            if (newV === 0) {
                this.computedSurplusTime();
            }
        },
        /**
         * 监听 活动开始时间的变化
         */
        endHours: function () {
            this.computedSurplusTime();
        }
    }

3.clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

参考这个不错的博客↓
https://blog.csdn.net/qq_35430000/article/details/80277587

4.瀑布流实现的逻辑

1.创建一个整个数据源的样式高度 imgStyles
2.遍历数据源， 对每个数据源动态生成相对整个商品div一个相对随机高度，然后再push到imgStyles中， 展示列表的时候，将每个商品列表通过v-for循环渲染刚才生成的高度（imgStyles[index]）
3.声明两个变量leftHeightTotal，rightHeightTotal, 左半部分整体距离顶部的距离， 及右半部分，声明goodsItemStyle=[ ]， 用来防止所有item的样式的集合
4.比较leftHeightTotal、rightHeightTotal， 若eftHeightTotal<=rightHeightTotal 则下一个Item放置左侧，反之右侧，设置好样式后再push到goodsItemStyle中,设置好后并更新leftHeightTotal、rightHeightTotal

if (leftHeightTotal <= rightHeightTotal) {
            // item 就应该放置到左侧。此时 item 距离左侧为0，距离顶部为当前的 leftHeightTotal
            goodsItemStyle = {
              left: '0px',
              top: leftHeightTotal + 'px'
            };
            // 更新左侧距离顶部的高度
            leftHeightTotal += elHeight;
          } else {
            // item 距离右侧为 0， 距离顶部为当前的 rightHeightTotal。
            goodsItemStyle = {
              right: '0px',
              top: rightHeightTotal + 'px'
            };
            // 更新右侧距离顶部的高度
            rightHeightTotal += elHeight;

5.created/mounted

当html结构布局初始化绑定数据时， 要在created中将这个数据源赋值，而不是再mounted中,否则会报错
htm结构是这样的

<template v-slot:nav-center>
        <search :bgColor="navBarCurrentSlotStyle.search.bgColor"
                :hintColor="navBarCurrentSlotStyle.search.hintColor"
                :icon="navBarCurrentSlotStyle.search.icon">
        </search>
      </template>

vue data数据

image.png

数据赋值

image.png

6.使用懒加载

当使用懒加载的时候npm run build打包出的代码会单独生成一个相应文件的js文件， 若不用懒加载， 不会单独生成一个文件， 而是会放入其他打包好的js代码中

7.关于商品展示的逻辑

首先设置好三种样式，用css写好， 绑定在容器组件和item中，然后动态控制数据 进而实现对布局的切换

image.png

当点击排序方式按钮时的逻辑

image.png image.png

8. 深拷贝数据源不改变原数据

this.xxx = this.yyy.dataSource.slice(0) （dataSource是数组