Vue中用插件vue-awesome-swiper实现轮播图

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 classifyItem" :key="index"> <img :src="item.icon" 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 }, 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> 

本文地址：https://blog.csdn.net/SANJIN0527_/article/details/107723305