Vue项目中使用swiper在移动端开发轮播图

vue项目中用swiper轮播图

老规矩，先看效果

第一步：安装swiper

npm install vue-awesome-swiper --save

第二步：在vue文件中使用

1、 引入依赖

import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
 
export default {
  name: 'swiper',
  components: { swiper, swiperSlide },
...

2、封装了轮播图属性、图片网址数据

注意不同swiper版本属性名称、赋值格式不同
swiperOption：分页，每3s轮播一页

data() {
    return {
      swiperList :[],
      swiperOption: {
        autoplay: {
          disableOnInteraction: false,  // 用户操作swiper之后，是否禁止autoplay
          delay: 3000, // 自动切换的时间间隔（单位ms）
        },
        initialSlide: 0,
        loop: true,
        pagination: { el: '.swiper-pagination' }, // 分页按钮
        paginationClickable: true,
        onSlideChangeEnd: swiper => {
          //console.log('onSlideChangeEnd', swiper.realIndex)
        }
      }
    }
  },

3、轮播图代码

<section class="my-swiper">
    <swiper :options="swiperOption">
        <swiper-slide  class="my-swp-silde" v-for="(slide, key) in swiperList" :key="key" data-id="slide.id">
            <img class="my-swp-img" :src="slide.img" alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</section>

4、通过mock模拟数据接口

！！！轮播的图片，我是通过mock模拟的数据，在这里也奉上我的代码，要不大家不知道上边代码中swiperList是怎么来的 ^ _ ^

（这里不重点讲axios和mock怎么用了）

...
import '@/api/mock/images'//这是我的模拟图片的接口
import api from '@/api/axios/api' //封装axios请求
...
mounted () {
    this.bannerInfo();
  },
  methods: {
    //轮播图初始化
    bannerInfo() {
    //通过接口获取图片数据
      api.api('/images/list')
      .then(res => {
        this.swiperList = res;
      });
    }
  },
  ...