vue使用swiper（轮播图）-真实项目使用

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index">
        <img :src="item.imageUrl" alt="banner图">
      </div>
    </div>
    <!-- 如果你需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果你需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
    <!-- 如果你需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
</template>
 
<script>
// 引入Swiper的css文件
import 'swiper/css/swiper.css';
// 引入Swiper
import { Swiper, SwiperSlide } from 'swiper/vue';
import { ref, onMounted } from 'vue';
 
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    // 假设bannerList是从某个API获取的数据
    const bannerList = ref([]);
    const fetchBannerList = async () => {
      try {
        // 这里使用了Mock API，实际项目中应该是API请求
        const response = await axios.get('/api/banner');
        bannerList.value = response.data;
      } catch (error) {
        console.error('获取Banner列表失败:', error);
      }
    };
 
    onMounted(fetchBannerList);
 
    return {
      bannerList
    };
  }
};
</script>
 
<style>
.swiper-container {
  width: 100%;
  height: 300px;
}
</style>

这个示例代码展示了如何在Vue项目中使用Swiper实现轮播图功能。首先，我们引入了Swiper的CSS和必要的Vue组件。然后，我们定义了一个响应式数组bannerList来保存轮播图的图片，并使用onMounted生命周期钩子发起API请求来获取这些图片。最后，我们在模板中遍历bannerList来展示每个轮播项，并添加了分页器、导航按钮和滚动条的相关HTML结构。