Question

我对Vue相当新，所以如果这是一个愚蠢的问题，请耐心等待。

我有大量的图像，我使用此代码输出到屏幕上作为一种电影卷轴：

images = [
    {src: 'image1.jpg'},
    {src: 'image2.jpg'},
    {src: 'image3.jpg'},
    {src: 'image4.jpg'},
    {src: 'image5.jpg'},
    ...etc
];

<div v-for="(img, index) in images" :key="index">
   <img :src="img.src" />
</div>

编辑：制作的是水平条带。感兴趣的图像应位于屏幕的中心，在屏幕宽度允许的任何一侧可以看到尽可能多的图像（此时通常为四或五）。所需索引来自代码中的其他位置。我可以得到在v-for循环中输出的索引的值没有问题，但我似乎无法让它改变循环的位置。

到目前为止一切顺利，这将以我想要的方式输出集合。然而，我想要做的是在提供适当的索引时转到卷轴上的特定图像，所以我想问题是是否可以转到v-for循环中的特定图像/索引编程？

非常感谢任何正确方向的帮助或指示。

由于

Answer 1

很难说你需要如何从缺乏代码中专门实现这一点。但是，无论你怎么做，你可能都想使用$refs。将ref attribute放在与v-for相同的元素上将创建一个对以相同顺序索引的元素的引用数组。从那里你可以根据你的需要设置滚动。

以下是一个例子：

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        {text: 'a'},
        {text: 'b'},
        {text: 'c'},
        {text: 'd'},
        {text: 'e'},
        {text: 'f'},
        {text: 'g'},
        {text: 'h'},
      ]
    }
  },
  methods: {
    scrollTo(index) {
      let $item = this.$refs.item[index];
      let $container = this.$refs.container;
      $container.scrollTop = $item.offsetTop;
    }
  }
})

body { margin: 0; }

.container {
  background: #fafafa;
  width: 100px;
  height: 50px;
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <div class="container" ref="container">
    <div v-for="(item, index) in items" :key="index" ref="item">
      {{ item.text }}
    </div>
  </div>
  
  <button v-for="(item, index) in items" :key="index" @click="scrollTo(index)">
    {{ item.text }}
  </button>
</div>

将v-for设置为特定索引

1 个答案: