vue 中使用swiper 動態獲取圖片后滑動效果失效


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
  });


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM