vue中怎么找到v-for的列表中特定的一项?
现在想做一个电梯导航的效果,这里的代码是左侧的导航栏,当右侧页面滚动的时候会根据滚动的高度去更新leftId,然后让某一项高亮,
<div class="left" ref="leftRef">
<ul>
<li
v-for="(item, index) in 30"
ref="leftLisRef"
:key="index"
:class="{ active: index === leftId }"
@click="changeLeftId(index)"
>
{{ item }}
</li>
</ul>
</div>
但是当导航栏的项目太多的时候,active的那一项就可能会在屏幕外面,我现在的思路就是找到active那一项的位置,然后再判断是不是超出可显示的范围了,然后再用这些数据去调整外侧盒子的滚动距离
// 页面显示区域的高度
let view = parseInt(window.getComputedStyle(DrawerBodyHeight.value).height)
// active元素的位置
let active =
leftLisRef.value.find((item) => {
return item.classList.contains('active')
}).offsetTop
// 盒子的滚动距离
let scroll = leftRef.value.scrollTop
active这项看着就不太对劲,想知道这里有没有更好的做法,或者说我的思路是不是有问题
回复
1个回答
test
2024-06-30
<div class="left" ref="leftRef">
<ul>
<li
v-for="(item, index) in 30"
ref="leftLisRef"
:key="index"
:class="{ active: index === leftId }"
@click="changeLeftId(index)"
>
{{ item }}
</li>
</ul>
</div>
watch(() => leftId, (newVal) => {
let activeElement = leftLisRef.value[newVal];
activeElement.scrollIntoView({ behavior: "smooth", block: "nearest" });
});
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容