🌬🌬🌬前言：今天来分享一下移动端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
