产品栈参数组件相关笔记（插槽slot，吸顶问题）

产品栈组件相关笔记

产品栈参数组件（具体引入步骤省略，就是常规的组件引入过程）

一.样式内容配置
立即购买按钮，以slot插槽的形式插入的
因为有的产品栈页面这个按钮不是立即购买功能，可能是添加购物车功能，用插槽更利于我们灵活的控制。（之前model组件也是插槽的形式，也是为了以后能方便根据功能更改内容，更加便利）


二.吸顶：
1》先撑开内容（用假数据）有滚动条

2》给window绑定scroll滚动事件，并给nav-bar绑定类class


3》给is-fixed 绝对定位添加样式

三吸顶的问题和需要注意的事项：
1》我们为什么给window.addEventListener的第二个参数设置成this.initHeight而不是function(){}，是因为设置成this.initHeight当组件销毁时，destroyed可以进行移除

2》组件销毁，并不是把组件永远的销毁掉，而是”切换成另一个页面“，比如从产品栈页面切换到主页面，就可以理解成把产品栈的组件销毁，此时把产品栈销毁了，但是里面的window的scroll事件还是存在，无论是在主页面还是其他页面滚动页面都会触发scroll事件，是没必要的占内存，我们需要进行destroy摧毁，同时还要注意removeEventListener第三个参数是true，默认捕获，我们应该更改为false冒泡，这样在产品栈销毁时，window的scroll事件也会被一起移除。

3》box-shadow的参数：
第一个是x轴阴影
第二个是y轴阴影
第三个是阴影大小
第四个是阴影颜色

4》关于is-fixed设置样式时出现的问题
①.要在.nav-bar里面&.is-fixed 而不要单独.is-fixed至于原因
scss中&使用

②.用于给nav-bar设置了fixed定位，其宽度就跟内容区的宽度一样，必须用width：100%给它撑开

③.为了避免兼容问题不选择sticky进行定位