動態加載swiper,默認顯示最後一個swiper-slide怎麼辦

本身遇到的一個問題

 

 

VUE動態加載完成後顯示最後一個，沒找到緣由不知道爲何

用了一個別人折中的方法

操做DOM更改了transform3d初始值

代碼以下

    // 得到學段信息
    getPeriods () {
      let data = {
        subject: this.selectPeriodNum
      }
      this.$axios({
        method: 'GET',
        url: '/api/app/v1/get_live_courses_type',
        params: data,
        headers: {
          'sign': this.$encryption(data, this.$store.state.token, this.$store.state.uid)
        }
      })
        .then(res => {
          console.log(res)
          this.periodData = res.data.data
          this.$nextTick(() => { // 下一幀渲染
            this.nav2Swiper()
            this.setSwiperInit()
          })
        })
        .catch(err => { console.log(err) })
    },




    nav2Swiper () {
      this.nav2SwiperOb = new Swiper('#nav2 .swiper-container', {
        initialSlide: 0,
        slidesPerView: 5,
        // spaceBetween: '4.27%',
        observer: true, // 修改swiper本身或子元素時，自動初始化swiper
        observeParents: true, // 修改swiper的父元素時，自動初始化swiper
        slideShadows: true
      })
    },
    setSwiperInit () {
      setTimeout(() => {
        document.getElementsByClassName('swiper-wrapper')[0].style.transform = 'translate3d(0px, 0px, 0px)'
      }, 50)
    }

使用

 

setTimeout(() => {
        document.getElementsByClassName('swiper-wrapper')[0].style.transform = 'translate3d(0px, 0px, 0px)'
      }, 50)初始化