vue中使用swiper实现多图可切换轮播

1、npm安装：

npm install vue-awesome-swiper --save

2、在main.js中引入：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)

3、页面中HTM5代码：

 <div class="banner_wrap">    
  <swiper :options="swiperOption">      
    <swiper-slide  class="swiper-wrapper"       
     v-for="(item, index) in bannerList"   :key="index"     >      
      <div class="el-details">      
        <div>             
   <img :src="item.imgUrl" />
            <div @click="shopping(item.id)">点击购买</div>
            </div>           
 </div>       
   </swiper-slide>        
         </swiper>       
  <!-- 如果需要分页器 -->       
   <div class="swiper-pagination"></div>     
   <!-- 如果需要导航按钮 -->     
   <div class="swiper-button-prev"></div>    
    <div class="swiper-button-next"></div>   
   </div>

5、页面中JS代码：

<script>
//局部引入swiper插件
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default ({
 components: {   
 swiper,  
  swiperSlide 
}, 
 data () { 
return {  
swiperOption: {    
    observeParents: true,      
  pagination: '.swiper-pagination',  
      paginationClickable: true,    //分页可点击   
     slidesPerView: 4,   //每次滑动图片4张      
  slidesPerGroup: 4,    //每个div只有4张图片     
   loop: false,        //false 不循环    true循环  
      grabCursor: false,  //鼠标光标     
   clickable: false, // 允许点击小圆点跳转       
 autoplay: {     
     delay: 4000,    //秒       
   stopOnLastSlide: false,    
      disableOnInteraction: false,//滑动不会失效   
     },     
   observer: true, //修改swiper自己或子元素时，自动初始化swiper     
   observeParents: true,//修改swiper的父元素时，自动初始化swiper    
    navigation: {//导航箭头   
       nextEl: '.swiper-button-next',       
   prevEl: '.swiper-button-prev'     
   },     
   // 如果需要分页器    
    pagination: {        
  el: '.swiper-pagination',     
   },  
    },   
   bannerList: [   
     { imgUrl: '../../static/img/01.png', id: '1' },    
    { imgUrl: '../../static/img/01.png', id: '2' },   
     { imgUrl: '../../static/img/01.png', id: '3' },     
   { imgUrl: '../../static/img/01.png', id: '4' },    
  ],  
  }  
}, 
 created () {  
   }, 
 methods: {
 shopping (id) {   
   console.log('点击的id',id)  
  }, 
 }
})
</script>

6、loop为false的情况下，点击事件正常，为true点击事件会混乱，解决方案自行百度！！！(如果解决了麻烦告知下！！！)