vue-awesome-swiper

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

本文地址：https://www.cnblogs.com/veinyin/p/9370113.html 

聊起轮播就会想到 swiper，作为一个强大的轮播插件，当然有人为 Vue 进行二次封装，那就是 vue-awesome-swiper

使用方法如下

第一步  

npm install vue-awesome-swiper --save

第二步

import {
    swiper,
    swiperSlide
} from 'vue-awesome-swiper'

第三步

swiper(:options="swiperOption" ref="mySwiper")
    swiper-slide
    swiper-slide
    swiper-slide　　

以上这些步骤应该是没有问题的

下面依次介绍如何书写配置项、如何调用 swiper 方法、如何回调

第四步  配置项

在 data 的 swiperOption 中写配置项，比如

data() {
    return {            
       swiperOption: {
           notNextTick: true,
           direction: 'vertical'
       },
    }
}

上面是很简单的一个示例，其他配置项继续写在 swiperOption 里就可以了

第五步  swiper 方法

computed: {
    swiper() {
         return this.$refs.mySwiper.swiper
    },        
}

这里得到了 swiper，可以调用 swiper 方法

比如，有三个按钮，分别对应三个轮播页，点击按钮轮播显示到对应页，这时可以给按钮绑定方法，在 methods 中这样写

clickActiveType(index){
    this.swiper.slideTo(index,300,false)
}　　

上面主要是展示怎样调用 swiper 方法，其他方法都是类似的

第六步  swiper 回调

swiper4 的文档里面是把回调方法放到 key 为 on 的对象里，但我在使用时是不起作用的，如下所示才可以

swiperOption: {
    ...
    onSlideChangeEnd: (swiper) => { 
        console.log(swiper.activeIndex) 
    }
}

最初格式如下

swiperOption: {
    ...
    on: {
        onSlideChangeEnd: (swiper) => {
            console.log(swiper.activeIndex)
        }
    }
}

区别就在与是不是放在对象里

其他  鼠标滚轮控制轮播播放

swiper4 的 mousewheel 设为 true 不起作用，抱着试试看的想法，将 swiper3 的相应属性 mousewheelControl 设为 true 就可以了

 END~~~≥ω≤

以上是 vue-awesome-swiper 的全部内容， 来源链接： utcz.com/z/378870.html

回到顶部