Question

我目前正忙于创建自定义Vue轮播组件。我一直在这里使用代码的某些部分：link

此刻，我希望能够使滑块具有一个额外的功能，该功能应该是很少的导航项目符号。为此，我需要知道可见的活动幻灯片。由于justify-content：center，它总是在我的数组中显示中间项。

我当前要通过定义数组中的中间项来计算活动项。我尝试这样做，如下所示：

<script>
    export default {
        data () {
            return {
                slides: [
                {
                  title: 'I am slide A',
                  featured: 1,
                  img: '/images/carousel-img.png',
                  id: 1
                },
                {
                  title: 'I am Slide B',
                  featured: 0,
                  img: '/images/carousel-img.png',
                  id: 2
                },
                {
                  title: 'I am Slide C',
                  featured: 0,
                  img: '/images/carousel-img.png',
                  id: 3
                }
            ],
            activeImage: (this.slides.length / 2)
            }
        }
    }
</script>

这当然行不通，但是我不知道如何从这里出发。这里的任何人都可以推动我朝着正确的方向前进吗？

谢谢。

Answer 1

A-将为具有奇数个项目的数组返回slides.length / 2值。所以尝试

float

或

Math.floor(slides.length / 2)`

获得整数值

然后您可以使用此索引访问数组中的项目

~~(slides.length / 2)

示例：

slides[Math.floor(slides.length / 2)]

计算数组vue中的中心项

1 个答案: