vue中使用swiper

一. 下载swiper：

npm install swiper -S
 
 

二. css：

在main.js里引入css

 
 

   
   

    
    

   
   
   
   

    
    

     
     import Vue 
     
     from 
     
     'vue'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import 
     
     'swiper/dist/css/swiper.css';
    
    
   
   
 
 

三. js：

在需要使用swiper的组件里引入swiper，swiper的初始化放在mounted里（可以把官网例子的启动 var mySwiper =  删掉）；

 
 

   
   

    
    

   
   
   
   

    
    

     
     <script>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import Swiper 
     
     from 
     
     'swiper';
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     export 
     
     default {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     name: 
     
     'HelloWorld',
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       data () {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     return {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     msg: 
     
     'Welcome to Your Vue.js App'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       },
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       mounted(){
    
    
   
   

   
   

    
    

   
   
   
   

    
    
     
     
     new Swiper (
     
     '.swiper-container', {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     loop: 
     
     true,
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     // 如果需要分页器
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         pagination: 
     
     '.swiper-pagination',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     // 如果需要前进后退按钮
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         nextButton: 
     
     '.swiper-button-next',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     prevButton: 
     
     '.swiper-button-prev',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     // 如果需要滚动条
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         scrollbar: 
     
     '.swiper-scrollbar',
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       })        
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <
     
     /script>
    
    
   
   
 
 

四. html：

 
 

   
   

    
    

   
   
   
   

    
    

     
     <div class="swiper-container">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <div class="swiper-wrapper">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     <div class="swiper-slide">Slide 1
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     <div class="swiper-slide">Slide 2
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     <div class="swiper-slide">Slide 3
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <!-- 如果需要分页器 -->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <div class="swiper-pagination">
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <!-- 如果需要导航按钮 -->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <div class="swiper-button-prev">
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <div class="swiper-button-next">
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <!-- 如果需要滚动条 -->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <div class="swiper-scrollbar">
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </div>