对于这里的处理一共分为两个部分,点击滑块后变色,动画效果
这里的难点在于如何处理切换滑块的逻辑:
- 当 slider 进行切换时,它的当前位置就是通过 translateX 进行指定的,也就是我们只需要 计算出当前点击的item位置与宽度即可
- 那么要达到这个目的,我们就需要具备以下内容:
-
- 选中的 item 下标:currentCategoryIndex
- 所有 item 元素:itemRefs
- ul 的横向滚动偏移位置:ulScrollLeft
- 最后在 currentCategoryIndex 发生改变时,获取 item 下标元素的 left 和 width,计算 sliderStyle 即可
优化 category 数据
那么由于我们需要获取选中的 item 的下标,为了实现数据更好的共享,这里我们将获取categorys数据放到pinia中进行处理