swiper 在 vue 中的应用(以3.0为例)

一、使用方法
官网地址
参考此文章(点击我)
二、常见情况

  • 图片需要动态获取时

    待数据加载成功且渲染完毕后,进行节点初始化。例:

axios.post(‘接口地址’, 参数).then(response => {   
    this.pages = response.data; //pages 渲染数据的数组
    this.$nextTick(() => { //渲染结束
        // mySwiper 里面的属性按需配置,详情见官网
        let mySwiper = new Swiper(".swiper-container", { 
            initialSlide :0,//默认播放(值为图片下标)
            loop: false,//不循环
            speed: 600, //切换速度
            paginationClickable: true, //点击小点可以切换
        });
      });
});
  • 当有 3 组图片需要依次播放时(多组以此类推)
    情景:第 2 组图片滑动最后一张时,需要加载第 3 组图片;第 2 组图片滑动第一张时,需要加载第 1 组图片。
    方法:在初始化的时候,配置回调函数onTouchStart(开始滑动的X轴值)和 onTouchEnd(结束滑动的X轴值)。用差值来判断是往前滑还是往后划。

     this.$nextTick(() => {
       let mySwiper = new Swiper(".swiper-container", {
         observer: true, //修改swiper自己或子元素时,自动初始化swiper
         observeParents: true, //修改swiper的父元素时,自动初始化swiper         
         onTouchStart: function(swiper) {
           this.positionStart = swiper.getWrapperTranslate();
         },
         onTouchEnd: function(swiper) {
           this.positionEnd = swiper.getWrapperTranslate();
           if (this.positionStart > this.positionEnd && this.pages.length - 1 == this.mySwiper.activeIndex) { 
               //向后滑,加载后一组图片              
           } else if (mySwiper.activeIndex == 0 && this.positionStart < this.positionEnd) {
               //向前划,加载前一组图片   
           }
         }
       });
     });
    

这时,图片已经加载了另外一组图片,但是各组图片之间没有连贯起来,这就需要用到 slideTo方法去跳转(若加载第 3 组,则跳转到下标第 0 个;若加载第 1 组,则跳转到下标第 图片个数-1 个)。

mySwiper.slideTo('要跳转的图片下标', 10, false) // 10表示跳转速度;false 代表是否触发回到函数
    原文作者:姚星如
    原文地址: https://segmentfault.com/a/1190000016428417
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞