时间戳

首页 > 解决方案 > Vue.js 仅显示 3 张幻灯片

javascript - Vue.js 仅显示 3 张幻灯片

问题描述

我有一个轮播组件：

<template>
  <div class="flex items-center justify-between">
    <div class="w-1/5">
      <div class="pb-6">
        <h2 class="pb-6">
          My works
        </h2>
        <p>
          Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
        </p>
      </div>
      <div class="flex items-center slide-pagination">
        <span class="cursor-pointer slide-prev" @click="prev">&lt;<span class="text-grey-primary pl-1">/</span></span>
        <div class="px-3 flex items-center carousel-dots">
          <span class="mr-3 active" />

          <span class="mr-3" />
          <span class="w-1 h-1" />
        </div>
        <span class="cursor-pointer slide-next" @click="next"><span class="text-grey-primary pr-1">/</span>&gt;</span>
      </div>
    </div>
    <div class="carousel-clients-works flex w-3/4 justify-between overflow-hidden">
      <CarouselSlide v-for="(block,index) in blocks" :key="index" :index="index" :slide-current="slideCurrent">
        <div class="carousel-block mb-6" style="margin-left: auto; margin-right: auto;">
          <img :src="block.src" :alt="block.title">
        </div>

        <div class="text-center w-80">
          <h3 class="font-bold" v-text="block.title" />
          <ul v-for="(list, ind) in block.lists" :key="ind" class="disc-green">
            <li v-text="list.title" />
          </ul>
        </div>
      </CarouselSlide>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    blocks: {
      type: Array,
      default: null
    }
  },
  data: () => ({
    slideCurrent: 0
  }),
  computed: {
    slidesLen () {
      return this.blocks.length
    }
  },
  methods: {
    prev () {
      if (this.slideCurrent <= 0) {
        this.slideCurrent = this.slidesLen - 1
      } else {
        this.slideCurrent--
      }
    },
    next () {
      if (this.slideCurrent >= this.slidesLen - 1) {
        this.slideCurrent = 0
      } else {
        this.slideCurrent++
      }
    }
  }
}
</script>

和子组件 CarouselSlide：

<template>
  <div v-show="slideCurrent === index">
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    slideCurrent: {
      type: Number,
      default: 0
    },
    index: {
      type: Number,
      default: 0
    }
  }
}
</script>

我想在我的旋转木马上显示 3 张幻灯片，我该怎么做？在 slideCurrent 我只有 1 个数字，在子组件 CarouselSlide 我检查 currentSlide 与循环索引。我该如何解决这个问题？请帮帮我。我试过用过滤器来做，但这不是我需要的

标签： javascriptvue.js

解决方案

创建一个计算返回的数组，该数组仅包含您要显示的 3 张幻灯片：

computed: {
  blocksCurrent() {
    const numShown = 3;
    const blocksCurrent = [];

    for(let i = 0; i < numShown; i++) {
      const index = (this.slideCurrent + i) % this.blocks.length;
      blocksCurrent.push(this.blocks[index]);
    }
    return blocksCurrent;
  }
}

blocksCurrent而是在模板中循环：

<CarouselSlide v-for="(block, index) in blocksCurrent" ... >

推荐阅读