5.我们拿到的数组里面其实是包括最后的滑块div的,但是那个滑块并不需要,所以再优化,剪切一下,把滑块从数组中去掉。tabs
即为我们两个标题div
组成的数组。
为了清晰一点,我们打印一下tabs
。
6.下面的代码就用到了我们传递的参数,currentItem
的目的,你可以简单理解为当前div的index
。(其实这里用的是enum
,这个场景和index
的作用相差无几)
7.ok,我们现在只需要知道滑块应该滑动的距离就行了。
这里我们用到了offsetLeft
和clientWidth
,我们先讲解这两个究竟是个什么东西。
一.额外技能补充----offsetLeft
我们先看MDN是如何介绍的
这里提到了,返回当前元素左上角相对于offsetParent
左边界偏移的值。我们先打印一下userClickItem
来看看它身上的这个属性。是不是很熟悉,对没错,这个offsetParent
就是它父元素wrapper
,但是这个属性并不一定就是指的父元素。怎么理解呢?
当我们把wrapper
的position:relative
删除后,再打印看一下。
是不是感觉有清楚了呢?
MDN的解释,更加通俗的来说应该是相对于最近的具有相对定位属性的父元素的.....
ok,现在我们offsetParent
搞明白是什么东西了
我们继续理解这个画线的句子,这里用图形解释比较好。这里为了直观的解释,我们给wrapper
加上一个padding
为20px
我们这时候再打印一下userClickItem
什么意思呢?
其实指的就是这里的距离。
我们为什么要知道offsetLeft
呢?这里我们是为了给以后调整样式的时候留下伏笔,万一以后我们需要调整一下wrapper
的margin
和padding
我们的滑块是不会受到影响的,因为我们就是基于这个值来计算的。
二.额外技能补充----clientWidht
假设我们不给我们的标题div
加padding
属性,那么这时候它的值就是我们content
也就是内容区的宽度。让我们给标题加上宽度的时候,它指的就是content
宽度加padding
的宽度。
1.让我们验证一下,先来打印一下没有padding
的情况。
结果如下:
2.我们加上padding
再试一下。
三.滑块的初始位置与点击移动
ok!这里我们知道了clietnWidth
和offsetLeft
什么意思了,我们拿到这两个值有什么用呢?
我们的滑块本身就是相对于wrapper
来滑动的,它的起点其实是wrapper的最左边,它的初始位置如果是上面的的calcOffset
的话,那不就正好在第一个标题的正下方了吗?
ok,定义一个变量接收一下即可。
解释一下,这个7.5是我微调的一下,并没有什么实质性的原因。
然后我们设置一个:style
是一个计算属性滑块style
与滑块的div绑定即可。
组件刚挂载的时候就让滑块移动到正确的位置。
四.字体大小的切换
这个比较简单,大致说一下原理,因为我们能拿到用户点击的那个div
和全部的div
数组,我们在每次点击的时候,将用户拿到的div
的fontSize
变大,并且筛选出剩下的div
,使其fontSzie
恢复正常即可。
至于剩下一些小的样式和其他,这里不过多赘述,核心就是上面的思路。