关于slider 样式处理

🌬🌬🌬前言：今天来分享一下移动端Slider划动active状态切换样式的相关处理方案。

开整

1. src/views/main/components/navigation/mobile/index.vue

<!-- 滑块 -->
<li
  ref="sliderTarget"
  class="absolute h-[22px] bg-zinc-900 rounded-lg duration-200"
  :style="sliderStyle"
></li>

<script setup>
import { ref } from 'vue'

// 滑块
const sliderStyle = ref({
  transform: 'translateX(0px)',
  width: '60px'
})
</script>

😎😎😎分析一波：通过translateX来控制Slider的切换，所以我们需要计算除当前点击的item的位置和宽度。

• 装备一：选中的item下标：currentCategoryIndex
• 装备二：所有的items元素：itemRefs
• 装备三：最外层父元素 ul 的横向滚动偏离位置：ulScrollLeft
• 装备四：currentCategoryIndex改变时，获取items 下标元素的 left 和 width，计算 sliderStyle

🍭🍭🍭插播一条小知识点：Element.getBoundingClientRect() - Web API 接口参考 | MDN (mozilla.org) 返回元素的大小及其相对于视口的位置。

🍭🍭🍭插播一条小知识点：useScroll | VueUse中文文档 (vueusejs.com) 响应式获取滚动位置和状态。

<ul ref="ulTarget">
  <!-- 滑块 -->
  <li
    :style="sliderStyle"
  ></li>
  <!-- category item -->
  <li
    :ref="setItemRef"
    :class="{
      'text-zinc-100 ': currentCategoryIndex === index // 选中文字高亮
    }"
    @click="onItemClick(index)"
  >
   {{ item.name }}
 </li>
</ul>

<script setup>
import { ref, watch, onBeforeUpdate } from 'vue'
import { useScroll } from '@vueuse/core'
// 滑块
const sliderStyle = ref({
   transform: 'translateX(0px)',
   width: '60px'
})
// 选中的 item 下标
const currentCategoryIndex = ref(0)
// 获取填充的所有 item 元素
let itemRefs = []
const setItemRef = (el) => {
  if (el) {
    itemRefs.push(el)
  }
}
onBeforeUpdate(() => {
  itemRefs = []
})
// 获取 ul 元素，以计算偏移位置
const ulTarget = ref(null)
const { x: ulScrollLeft } = useScroll(ulTarget)
watch(currentCategoryIndex, (val) => {
  // 获取选中元素的 left、width
  const { left, width } = itemRefs[val].getBoundingClientRect()
  // 为 sliderStyle 设置属性
  sliderStyle.value = {
    // ul 横向滚动位置 + 当前元素的 left 偏移量
    transform: `translateX(${ulScrollLeft.value + left - 10 + 'px'})`,
    width: width + 'px'
  }
})

// item 点击事件
const onItemClick = (index) => {
  currentCategoryIndex.value = index
}

👏👏👏完事儿

贩卖快乐~.png