vue3使用swiper插件上下滚动的话如何设置前两个数组在一排上下滚动

在Vue3中使用Swiper插件实现两个数组在同一行上进行上下滚动时，你可以结合Swiper的`slidesPerView`（每行显示的滑块数）和`paginationBulletRender`（自定义分页点渲染）选项来达到这个效果。首先，安装Swiper及其Vue相关的库：

npm install swiper vue-awesome-swiper

然后，在组件中配置Swiper，假设你有两个数据数组`array1`和`array2`：

<template>
  <div class="swiper-container">
    <swiper :options="swiperOptions" ref="mySwiper">
      <swiper-slide v-for="(item, index) in array1" :key="index">
        {{ item }}
      </swiper-slide>
      <swiper-slide v-for="(item, index) in array2" :key="index">
        {{ item }}
      </swiper-slide>
    </swiper>
    <div class="swiper-pagination" slot="pagination"></div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      array1: ...,
      array2: ..., // 你的两个数组
      swiperOptions: {
        slidesPerView: 1, // 每行显示1个滑块，实际上会显示两行，因为两个数组
        spaceBetween: 0,
        direction: 'vertical', // 设置为垂直方向
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'swiper-pagination-bullet',
          renderBullet: (index) => `<span>${index + 1}</span>`, // 自定义分页点内容
        }
      }
    }
  }
}
</script>

<style scoped>
.swiper-container {
  width: 100%;
}

.swiper-slide {
  /* 根据需要添加样式 */
}

.swiper-pagination {
  position: absolute;
  bottom: 10px; // 分页条位置
  text-align: center;
}
</style>

在这个例子中，我们将`slidesPerView`设为1，实际上是让Swiper认为每一行有1个滑块，但由于两个数组交替放置，所以看起来像是上下滚动。分页条可以根据需要调整位置。