脚本宝典收集整理的这篇文章主要介绍了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.positionEnd && this.pages.length - 1 == this.mySwiper.activeIndex) { //向后滑，加载后一组图片 } else if (mySwiper.activeIndex == 0 && this.positionStart < this.positionEnd) { //向前划，加载前一组图片 } } }); }); " title="" data-original-title="复制">

   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 代表是否触发回到函数

脚本宝典总结

以上是脚本宝典为你收集整理的swiper 在 vue 中的应用(以3.0为例）全部内容，希望文章能够帮你解决swiper 在 vue 中的应用(以3.0为例）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。