image.png
这个是慕课网黄轶老师出的一个vue实战项目，因为之前公司项目比较紧，天天加班，只能在地铁上去来回的看，没有实操，趁着周末亲手敲了一下，顺便思考思考里面的一些知识点和技巧。
从轮播图开始谈起吧，下面是轮播图的template的代码，其中slot这个是最让人迷惑的地方，之前也看了些博客，自己写了写代码，才大概知道些什么意思。
image.png
slot，顾名思义叫做插槽，可以这么理解，就像小时候的那种插卡的游戏机，游戏机连接到电视上本身是没有游戏的，但是在插槽上插上游戏卡，就能愉快的玩起了游戏，所以插槽其实可以理解为一个中间件，用来加载里面的一些控件，解耦合。
image.png
这个是slider，即轮播图的使用，里面包含了一个div，这个其实就是插在slot的地方的布局，用来降低代码的耦合性，方便阅读代码。
在视频中，黄轶老师手写了轮播图控件，其中最为重要的其实是对轮播图宽度的计算
image.png
首先获取轮播图里每个子元素，遍历获取每个子元素的宽度，其中addClass(child, 'slider-item')是动态给每个子元素设置css属性
image.png
然后动态的给子元素设置宽度，当能滑动或者自动轮播的时候，子元素的宽度乘以2，用来切换，因为轮播图想无缝滑动，必须将第一张图放到最后一个位置，最后一张图放到第一张的位置前面，假如有五个轮播图的话，事实上，获取的宽度是七张图的宽度。
记录下来，方便自己以后可以进行回顾学习，温故知新。
网友评论