项目的细节3

1.吸顶功能的实现

首先监听浏览器的滚动条 
mounted(){
    window.addEventListener('scroll',this.方法名)
},
method:{
    方法名(){
        //获取滚动条的高度
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop
        //是否吸顶
        this.变量名 = scrollTop>154?true,false; 
    },
    destroyed(){
        //销毁监听方法
        window.removeEventListener('scroll',this.方法名,false)
    }
}
:class={'isCeiling':变量名}
.isCeiling{
    position:fixed;
    top:0;
}

2.css3动画库

https://daneden.github.io/animate.css

3.video标签的使用

<video controls autopaly muted src=""></video> 
controls 显示控件
autopaly 自动播放 需要配合 muted静音输出
object-fit:cover 取消默认的边框样式
outline:none  取消默认样式

4.使用transition实现视频淡入淡出

.video{
    top:-50%,
    opacity:0,
    transition:all .6s;
     &.slide{
        top:50%,
        opacity:1
    }
}
:class={'slide':isShowVideo} 

5.使用animation实现视频淡入淡出

@keyframes slideDown{
    from{
        top:-50%;
        opacity:0;
    }
    to{
        top:50;
        opacity:1;
    }
}
@keyframes slideUp{
    from{
        top:50%;
        opacity:1;
    }
    to{
        top:-50%;
        opacity:0;
    }
}
.video{
    top:-50%;
    opacity:0;
    &.slideDown{
        //forwords是停在最后一帧
        animation:slideDown .6s linear forwords;
    }
    &.slideUp{
        animation:slideUp .6s linear forwords;
    }
}
通过改变isShowVideo是slideDown还是slideUp来判断

6.获取动态路由的参数

let id = this.$route.params.id;
跳转动态路由：
    this.$router.push(`/detail/${id}`)

7.清除浮动的方式

在外面的div加一个伪类清除浮动

8.filter方法和every方法

this.list.filter(item=>item.isCheck);  返回的是为true的数组
this.list.every(item=>item.isCheck); 如果每个子元素都为true则返回true，否则返回false
购物车总结：
    所有的操作都调用接口，包括全选单选 数量的加减 和删除和计算金额选择件数等，都在后台存储
    这样做的好处是前端不用去操作金额，更安全
    前端做的操作是刷新更新的数据，和调接口改变数据