首页 > 技术文章 > vue 中使用swiper 动态获取图片后滑动效果失效

haochenpand 2019-02-13 16:46 原文

swiper滑动失效的原因是因为swiper的初始化在数据加载之前完成了,解决这个问题有两种方法:

 

1. 使用vue提供的$nextTick()方法

  在数据初始化完毕之后,再初始化swiper就可以了

  this.$nextTick(function () {
    var swiper = new Swiper('.swiper-container', {

      loop: true, //循环切换
      autoplay: true,//可选选项,自动滑动
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },


    })
  })

2.在swiper初始化的时候

  swiper1 = new Swiper('.swiper-container', {
    loop: true, //循环切换

    autoplay: true,//可选选项,自动滑动
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true//修改swiper的父元素时,自动初始化swiper
  });

推荐阅读