0

我在构建一个轮播时遇到问题，在里面我创建了一个带有版本（ant-design 1.6.2）的卡片问题是轮播不能滑动我该如何解决？

在此处输入图像描述

这是我在文件中的代码page/something.vue

<section class="py-3 pb-3" style="margin-bottom: 8em; margin-top: 3em;">
  <div class="text-center">
    <h1>Comments Something this</h1>
  </div>
  <div class="text-center">
    <p>Total Comments : 7 people</p>
  </div>
  <div class="row">
    <comments :review="review" />
  </div>
</section>

这是我的组件文件component/comments.vue

<a-carousel arrows>
  <div
    slot="prevArrow"
    slot-scope="props"
    class="custom-slick-arrow border"
    style="left: 30em;zIndex: 1"
  >
    <a-icon :data-props="props.review" type="left-circle border" theme="filled" style="font-size: 44px;" />
  </div>
  <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow border" style="right: 30em;">
    <a-icon :data-props="props.review" type="right-circle border" theme="filled" style="font-size: 44px;" />
  </div>
  <div class="d-flex justify-content-center">
    <div v-for="data in review" :key="data.id" class="col-lg-3" style="margin-left: 1em; margin-right: 1em;">
      <comments-card :review="data" />
    </div>
  </div>
</a-carousel>

这是我的代码蚂蚁卡文件component/comment-card.vue

<a-card
  hoverable
  :bordered="false"
  class="w-60 shadow border"
>
  <a-card-meta>
    <div slot="title" class="d-flex pt-1 " style="height: 3rem; white-space: normal; padding: 1em;">
      <div class="d-flex">
        <div class="mr-3">
          <img width="40" :src="review.Urlimg" style="border-radius: 0.3em;">
        </div>
        <div class="row">
          <div class="col-12">
            <span><b>{{ review.name }}</b></span><br>
            <span class="text-ping">
              <b>{{ review.rating }}</b> <a-icon type="star" theme="filled" style="color: yellow; " />
            </span>
          </div>
        </div>
      </div>
    </div>
    <div slot="description">
      <div class="row" style="margin-top: 1em;">
        <p>{{ review.description }}</p>
      </div>
    </div>
  </a-card-meta>
</a-card>
4

0 回答 0