vue遇到的添加current失败

最新推荐文章于 2025-05-27 17:22:44 发布

原创最新推荐文章于 2025-05-27 17:22:44 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在制作类似“饿了么”的单页面应用程序时遇到左侧导航与右侧内容滚动不同步的问题。通过将左侧导航项的 index 作为 key 值实现了滚动同步，但对实现原理感到困惑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做仿饿了么单页面的时候，商品部分右侧滚动，左侧对应分栏添加current，但是失败，左侧导航代码如下

<div class="menu-wrapper" ref="menuWrapper">
  <ul>
    <li v-for="(item,key,index) in goods" :key="key" class="menu-item" :class="{'current':currentIndex === index}">
      <span class="text border-1px">
        <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
      </span>
    </li>
  </ul>
</div>

然后进行更改后，让index做key值，解决，想不明白原理，，，，但是解决了，，，如果有人看到了，，，，希望解答一下，，，