Vue使用Swiper插件

一、Vue使用Swiper做轮播图

实现轮播图效果是网站开发需求中较为普遍的一项任务。Vue框架中，可以使用Swiper插件的轮播图组件轻松实现轮播图功能。以下是实现Vue使用Swiper做轮播图的步骤：

1、安装Swiper插件

  npm install vue-awesome-swiper --save 

2、在Vue组件中导入Swiper插件

  import Vue from 'vue'
  import VueAwesomeSwiper from 'vue-awesome-swiper'

  // require styles
  import 'swiper/css/swiper.css'

  Vue.use(VueAwesomeSwiper)

3、在Vue组件中使用Swiper轮播图组件

  
   
  <script>
  export default {
    data () {
      return {
        swiperOption: {
          autoplay: true,
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        slides: [
          'https://swiperjs.com/demos/images/nature-1.jpg',
          'https://swiperjs.com/demos/images/nature-2.jpg',
          'https://swiperjs.com/demos/images/nature-3.jpg',
          'https://swiperjs.com/demos/images/nature-4.jpg'
        ]
      }
    }
  }
  </script>

二、Vue使用Swiper组件

除了上述使用Swiper插件轮播图组件之外，Vue也提供了自己的Swiper组件，实现方式与插件类似。以下是实现Vue使用Swiper组件的步骤：

1、安装Swiper组件

  npm install swiper --save 

2、在Vue组件中导入Swiper组件

  import Swiper from 'swiper'

  // require styles
  import 'swiper/swiper-bundle.css'

3、在Vue组件中创建Swiper实例

  mounted () {
    this.mySwiper = new Swiper('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      loop: true,
  
      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
  
      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
      },
  
      // And if we need scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
  },

  beforeDestroy () {
    if (this.mySwiper) {
      this.mySwiper.destroy()
      delete this.mySwiper
    }
  }

三、Swiper微信小程序

除了在Vue中使用Swiper，Swiper也支持微信小程序开发。以下是在微信小程序中使用Swiper的步骤：

1、安装Swiper微信小程序插件

  npm install --save swiper-miniprogram 

2、在微信小程序页面中引入Swiper组件

四、Vue使用Swiper获取当前索引

在Vue使用Swiper插件或组件进行轮播图展示时，我们经常需要获取当前轮播图的索引值。以下是获取当前轮播图索引的方式：

1、在Swiper组件或插件的swiperOption中添加onSlideChange回调

  swiperOption: {
    onSlideChange: function(swiper){
      console.log(swiper.activeIndex); //当前轮播图的索引值
    },
    ...其他配置
  },

2、在Swiper组件中使用Vue自定义事件获取当前索引

  
   
    ...轮播图内容
  
   

  methods: {
    getSwiperIndex (swiper) {
      console.log(swiper.activeIndex); //当前轮播图的索引值
    }
  }

五、Vue使用Swiper禁止手势滚动

在某些特殊场景中，我们需要禁止轮播图手势滚动。以下是禁止手势滚动的方式：

1、使用Swiper组件的noSwiping属性禁止滑动

  
   
    ...轮播图内容
  
   

2、使用Swiper组件的noSwipingSelector属性指定禁止滑动的元素选择器

  
   
    ...轮播图内容
    
    
不可滑动内容
    
  
   

在上述例子中，类名为.no-swipe的元素为不可滑动元素。

六、Vue使用Swiper做页面滑动

除了轮播图展示，Swiper插件/组件还可以用于实现页面的平滑滚动效果。以下是使用Swiper实现页面滑动的步骤：

1、引入Swiper插件/组件

2、在Vue组件中创建Swiper实例

  mounted () {
    this.mySwiper = new Swiper('.swiper-container', {
      direction: 'vertical', // 垂直滚动
      mousewheel: true, // 鼠标滚轮控制滚动
    })
  },

  beforeDestroy () {
    if (this.mySwiper) {
      this.mySwiper.destroy()
      delete this.mySwiper
    }
  }

3、在对应的HTML中添加Swiper容器和子容器

  
   

    
    

      
     
页面1
     
      
     
页面2
     
      
     
页面3
     
    
    
  
   

4、设置Swiper容器和子容器的样式

  .vertical-swiper {
    height: 100%;
  }

  .swiper-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .swiper-slide {
    height: 100%;
    overflow-y: auto; // 使得页内滚动和页面互不影响
  }

5、在子容器中添加页面内容，实现平滑滚动效果。

七、总结

Swiper是一款强大又易于使用的轮播插件/组件，适用于多种网站开发需求。结合Vue框架，实现Swiper功能功能的方式更加灵活、简便。本文通过多个方面对Vue使用Swiper进行详细介绍，希望对读者有所帮助。