Vue中插件实现轮播图 轻松学会

Vue Slide Show 基于Vue的轮播图组件

vue的轮播图是通过vue-awesome-swiper来实现的，及时vue版的swiper
可以在github.com 上搜索 vue-awesome-swiper来参考一下

1.安装 vue-awesome-swiper指定版本

npm i  vue-awesome-swiper@2.6.7 --save
npm install vue-awesome-swiper@3.1.1 --save-dev

注意!先开始安装我是使用 vue-awesome-swiper最新版本4.11，但是在ios10上有轮播图不轮播的兼容性bug，为了解决这个问题，所以安装了比较旧3.1.1 或者2.6.7版本 一般都使用这个版本，要不然后面很多bug 难搞哦.

2.在component文件夹里新建Swipe.vue组件，然后写入如下：

html

<template>
	//用来设置属性 效果
   <swiper :options="swiperOptions">
    <swiper-slide class="classify_item" v-for="(item,index) in picList" :key="index">
        <img :src="item.src" width="100%" >
    </swiper-slide>
    //图片中的小圆点
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
 </template>

js

<script>
export default {
  name: "Swiper", // 此处不能用Swiper作为name，否则报错
  data() {
    return {
    //和上面绑定的一致
      swiperOptions: {
        pagination: ".swiper-pagination", // 轮播图的点
        loop:true, // 循环
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        //paginationType: "fraction", 分页的样式 ‘fraction’ 分式 
      },
      picList:[
          {id:0,src:'https://gtms01.alicdn.com/tps/i1/T1Ww_JFEpdXXcZd9sr-640-200.png'},
          {id:1,src:'https://gw.alicdn.com/imgextra/i3/149/O1CN01wekXPw1CyHZ23AC4R_!!149-0-lubanu.jpg'}
      ]
    };
  }
};
</script>

在放置左右切换按钮时候（想要更换箭头图片可以这样写）

<!-- 左箭头 -->
<div class="swiper-button-prev" slot="button-prev">
      <img src="引入自己想要的图片地址" style="width: 100%; height: 100%" />
</div>
<!-- 右箭头 -->
<div class="swiper-button-next" slot="button-next">
      <img src="" style="width: 100%; height: 100%" />
</div>