vue中使用swiper（获取当前页面）

最新推荐文章于 2023-10-24 16:01:16 发布

原创最新推荐文章于 2023-10-24 16:01:16 发布 · 5.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #vue.js #html5

vue.js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何安装并使用Vue-Awesome-Swiper组件库，包括在项目中引入和配置方法，以及如何通过监听slideChange事件获取当前Swiper页面的示例。

安装 npm install vue-awesome-swiper --save-dev

官网：https://github.surmon.me/vue-awesome-swiper/

使用前，在main.js加入全局引用

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

Vue.use(VueAwesomeSwiper)

官网上有很多的案例，可以找类似的案例并且复制到自己场景中

这边我就先补充一下简单的如何获取到swiper当前的页面

data() {
      return {
        swiperOption: {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          on:{
            slideChange:function(){
              console.log(this)
            }
          }
        }
      }
    }

在翻页的时候可以打印出this，

其实api中也说了，这个数值就是用来获取到切换的时候，是哪一页被激活了。

如何将这个值取出来

let vm = this
  export default {
    name: 'swiper-example-navigation',
    title: 'Navigation',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        activeIndex:0,
        swiperOption: {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          on:{
            slideChange:function(){
              vm.activeIndex = this.activeIndex
            }
          }   
        }
      }
    }
  }