vue中请求数据，用swiper4，swiper5制作轮播图详细步骤

vue中根据请求的数据，使用swiper4/5插件形成基本的轮播图

一.请求数据

1. 拿到轮播图数据步骤

1.1 创建request.js封装axios模板，nmp安装–import引入–创建axios实例–拦截器–发送网络请求

1.2 比如详情页detail做轮播图，请求detail中轮播图数据，request.js同目录创建detail.js

import { request } from './request'
//跟据接口，请求自己想要的那组数据，这里是和详情页有关的
export function getDetail(iid) {
    return request({
        url: '/detail',
        params: {
            iid
        }
    })
}

1.3 detail.vue中，拿到数据，保存起来

一般请求轮播图数据在created在这个生命周期函数中，模板渲染页面前调用，即通常初始化某些属性值，然后再渲染成视图。
1.3.1拿到数据

import {getDetail} from 'network/detail'
。。。
 created() {
      // 1.保存传入的iid
      this.iid = this.$route.params.iid
      // 2.根据iid请求详情数据
      getDetail(this.iid).then(res => {
        // 1.获取顶部的图片轮播数据
        console.log(res);
        this.topImages = res.result.itemInfo.topImages
        })
        }

1.3.2 保存数据

data() {
      return {
        iid: null,
        topImages: [],
        }
        }

二.swiper4和swiper5

2.1 swiper4.1.1使用

2.1.1安装swiper (这里是swiper 4.1.1的版本)

npm install vue-awesome-swiper --save

注：此方法安装的是4.1.1 在引用css的时候会找不到目录报错 根据提示安装@4就可以

2.1.2 pack.json中查看

版本号，目前该版本基本功能已经够用，要追求更多的功能效果可以用下面的版本5

node_modules中文件名

2.1.3 引入

①在main.js中全局中引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'//可以在组件中import

Vue.use(VueAwesomeSwiper）

②在组件中引用

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

2.2 swiper5的使用

2.2.1 安装swiper5

npm install vue-swiper5 --save

2.2.2 引入

①全局中

import Vue from 'vue'
import VueSwiper5 from 'vue-swiper5'
import 'swiper/css/swiper.css'//可在组件时候加

Vue.use(VueSwiper5)

②组件中

import 'swiper/css/swiper.css'
import { swiper } from 'vue-swiper5'

export default {
  components: {
    swiper
  }
}

此时可在package.json中查看版本，文件夹node_modules\swiper

三.创建轮播图组件DetailSwiper.js

3.1创建轮播图（swiper4）（含数据）

此处用的是swiper4

<template>
  <swiper :options="swiperOption" ref="mySwiper">
  //感觉这个v-for遍历的方法最好 不写死
    <swiper-slide v-for="(slide,index) in topImages" :key="index">
      <img :src="slide" alt="" class="swiperImage"/>
    </swiper-slide>
   //Optional controls
    <div class="swiper-pagination" slot="pagination"></div>
    //此处只需要分页符，如果需要button和scroll，根据项目而定
    //<div class="swiper-button-prev" slot="button-prev"></div>
    //<div class="swiper-button-next" slot="button-next"></div>
   //<div class="swiper-scrollbar"   slot="scrollbar"></div>
   //注：class和slot的值都不能更改
  </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css'
//有时候4安装会报错找不到css，此时根据vscode提示操作并@4即可
import { swiper, swiperSlide } from 'vue-awesome-swiper'
  
export default { 
    name:'DetailSwiper',
    //固定的swiper和swiperSlide
    component:{
    swiper, swiperSlide
},
//上面父组件detail.vue拿到了轮播图数据且定义了array类型，在这里传给轮播图组件
    props:{
        topImages:{
            type: Array,
            //严谨起见给default值，
            default(){
                return []
            }
        },
    },
    data() {
        return {
        //添加功能的部分，对象的形式，或者键值对
        //基本都是 属性：值  
      //或者  功能名（按钮，分页器，鼠标，缩略图）：{
           //            属性：值
          //             }
            swiperOption: {
            //可以根据API文档添加移动端的适配功能
            //分页符pagination
          pagination: {
            el: '.swiper-pagination',
            clickable :true,
          },
          //自动切换
          autoplay: {
          //3s切换一次
              delay: 3000,
             stopOnLastSlide: false,
             disableOnInteraction: false,
        },
        //打开页面默认轮播图所处图片下标
        initialSlide :0,
        //循环，只有autoplay无loop图片会从最后一张直接左移到第一张
        loop:true,
        //仅需滑动少部分距离，图片就划走
        longSwipesRatio : 0.1,
        }
    }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted(){
    //回调函数之类
    }，
}
</script>

<style scoped>
//自定义
 .swiperImage{
    width: 100%;
    height:500px;
} 
</style>

3.2创建轮播图（swiper5）仅模板

<template>
  <swiper :options="swiperOption">
    <template v-slot:items>
    //推荐v-for遍历，不要固定写死
        <div class="swiper-slide" v-for="(slide, index) in swiperSlides" :key="index">I'm Slide {{ slide }}</div>
    </template>
    //Optional controls分页，按钮，滑块之类
    <template v-slot:controls>
        <div class="swiper-pagination"></div>
   //<div class="swiper-button-prev" slot="button-prev"></div>
    //<div class="swiper-button-next" slot="button-next"></div>
   //<div class="swiper-scrollbar"   slot="scrollbar"></div>
    </template>
  </swiper>
</template>

<script>
import 'swiper/css/swiper.css'
import { swiper } from 'vue-swiper5'

  export default {
    name: 'carrousel-items',
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        //可以props传递，尽量不要写死
        swiperSlides: [1, 2, 3, 4, 5]
      }
    },
    mounted() {
    //根据情况而定
      setInterval(() => {
        console.log('simulate async data')
        if (this.swiperSlides.length < 10) {
          this.swiperSlides.push(this.swiperSlides.length + 1)
        }
      }, 3000)
    }
  }
</script>

四.在detail.vue中挂载 使用

4.1详细，轮播图制作结束

<template>
  <div id="detail">
  //前面驼峰命名时加这里加 - 
     <detail-swiper :top-images="topImages"></detail-swiper>
</template>

<script> 
//针对前面detail.js中的方法
import {getDetail} from 'network/detail'
import DetailSwiper from './childComps/DetailSwiper.vue'

export default {
    name:'Detail',
    components: { 
        DetailSwiper,
         },
         //下面衔接前面的拿到数据，和data中保存，然后根据项目完成该页面

五.swiper4-6的中文API文档 配置选项

5.1 网址

swiper4-6中文API文档
https://www.swiper.com.cn/api/index.html

swiper4文档
https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3

swiper5文档
https://github.com/wimil/vue-swiper5

swiper6文档
https://swiperjs.com/vue
6仅和vue3兼容