vue3--移动端slider处理

对于这里的处理一共分为两个部分，点击滑块后变色，动画效果

这里的难点在于如何处理切换滑块的逻辑：

• 当 slider 进行切换时，它的当前位置就是通过 translateX 进行指定的，也就是我们只需要 计算出当前点击的item位置与宽度即可
• 那么要达到这个目的，我们就需要具备以下内容：

• • 选中的 item 下标：currentCategoryIndex
  • 所有 item 元素：itemRefs
  • ul 的横向滚动偏移位置：ulScrollLeft
  • 最后在 currentCategoryIndex 发生改变时，获取 item 下标元素的 left 和 width，计算 sliderStyle 即可

优化 category 数据

那么由于我们需要获取选中的 item 的下标，为了实现数据更好的共享，这里我们将获取categorys数据放到pinia中进行处理