vue中怎么找到v-for的列表中特定的一项?

作者站长头像
站长
· 阅读数 8

现在想做一个电梯导航的效果,这里的代码是左侧的导航栏,当右侧页面滚动的时候会根据滚动的高度去更新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个回答
avatar
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" });
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容