vue使用swiper6（填坑日记）

1、安装swiper6

npm i swiper@6 -D

大部分都是引入出现问题，swiper6版本与之前的版本有点差异性。

2、引入

// main.js文件   
// 引入css    
import 'swiper/swiper-bundle.css';


// 局部需要使用的组件引入
// 引入js     
import Swiper from "swiper/swiper-bundle.min.js"

3、使用（记得给swiper-container一个宽高）

// vue组件
<div>      
 <div class="swiper-container" >        
  <div class="swiper-wrapper" style="display: flex;">            
    <div class="swiper-slide" v-for="(item3, index3) in sceneList" :key="index3">              
      <img :src="item3._thumburl" alt="" />             
        <p style="">{{ item3._name }}</p>            
      </div>        
    </div>            
  </div>      
 <!-- 如果需要导航按钮 -->      
 <div class="swiper-button-prev"></div>      
 <div class="swiper-button-next"></div>
</div> 

// 数据
sceneList:[{ _name : '轮播1', _thumburl: '轮播1' }]

// swiper6属性配置,在生命周期mounted中，动态数据把下面的配置放到获取数据的后面执行即可
mounted() {
   let _self = this
   new Swiper ('.swiper-container', {        
     spaceBetween: 20,        
     slidesPerView: 6,        
     navigation: {          
     nextEl: '.swiper-button-next',          
     prevEl: '.swiper-button-prev'        
   },        
on: {          
   click: function(swiper){            
   console.log('触发点击事件')            
   console.log(swiper['clickedIndex'])            
   var index= swiper['clickedIndex'];            
   _self.activeClass = index            
   // 切换选中空间            
   _self.imgCheck('', index)          
 }          
 }   
 })
}

// css
.swiper-container {        
width: 1400px;        
height: 200px;
}