当前位置：首页 > VUE

vue实现京东轮播图

2026-02-21 20:45:05VUE

Vue 实现京东轮播图

京东轮播图通常包含自动轮播、手动滑动、指示器导航等功能。以下是基于 Vue 3 的实现方案，结合 swiper 库（业界常用轮播组件）完成。

安装 Swiper 依赖

确保项目已安装 swiper 和 vue-awesome-swiper（Vue 封装版本）：

npm install swiper vue-awesome-swiper

基础轮播图实现

创建一个基础轮播组件，支持自动播放和指示器：

<template>
  <swiper
    :modules="[Autoplay, Pagination]"
    :slides-per-view="1"
    :space-between="20"
    :autoplay="{ delay: 3000 }"
    :pagination="{ clickable: true }"
    @swiper="onSwiper"
  >
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      <img :src="slide.image" class="w-full h-auto" />
    </swiper-slide>
  </swiper>
</template>

<script setup>
import { ref } from 'vue';
import { Autoplay, Pagination } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';

const slides = ref([
  { image: 'https://via.placeholder.com/800x400?text=Slide1' },
  { image: 'https://via.placeholder.com/800x400?text=Slide2' },
  { image: 'https://via.placeholder.com/800x400?text=Slide3' },
]);

const onSwiper = (swiper) => {
  console.log('Swiper initialized:', swiper);
};
</script>

添加手动滑动效果

通过 Navigation 模块添加左右箭头按钮：

<template>
  <swiper
    :modules="[Autoplay, Pagination, Navigation]"
    :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }"
  >
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      <img :src="slide.image" />
    </swiper-slide>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </swiper>
</template>

<script setup>
import { Navigation } from 'swiper/modules';
import 'swiper/css/navigation';
</script>

响应式适配

根据屏幕宽度调整显示数量（如京东首页的多图轮播）：

const breakpoints = {
  640: { slidesPerView: 2 },
  1024: { slidesPerView: 3 },
};

样式优化

覆盖默认样式以匹配京东风格：

.swiper-pagination-bullet-active {
  background-color: #f10215; /* 京东红 */
}
.swiper-button-next, .swiper-button-prev {
  color: #f10215;
}

完整示例代码

<template>
  <div class="relative">
    <swiper
      :modules="[Autoplay, Pagination, Navigation]"
      :slides-per-view="1"
      :space-between="20"
      :autoplay="{ delay: 3000, disableOnInteraction: false }"
      :pagination="{ clickable: true }"
      :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }"
      :breakpoints="breakpoints"
    >
      <swiper-slide v-for="(slide, index) in slides" :key="index">
        <img :src="slide.image" class="w-full" />
      </swiper-slide>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </swiper>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

const slides = ref([
  { image: 'https://via.placeholder.com/1200x400?text=JD+Slide1' },
  { image: 'https://via.placeholder.com/1200x400?text=JD+Slide2' },
  { image: 'https://via.placeholder.com/1200x400?text=JD+Slide3' },
]);

const breakpoints = {
  768: { slidesPerView: 1.5 },
  1024: { slidesPerView: 2 },
};
</script>

<style scoped>
.swiper-pagination-bullet-active {
  background: #f10215;
}
.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 24px;
  color: #f10215;
}
</style>