在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 使用vue-awesome-swiper 插件問題

使用vue-awesome-swiper 插件問題

clipboard.png
輪播效果是第一頁(yè)是顯示 side1 和side2,然后 轉(zhuǎn)到下一頁(yè)是空白頁(yè),并不是第一頁(yè)顯示side1,第二頁(yè)顯示side2 ,哪里出錯(cuò)了?

代碼:

<template>
<div>

<swiper :options="swiperOption" ref="mySwiper">
  <!-- 幻燈內(nèi)容 -->
  <swiper-slide>slide1</swiper-slide>
  <swiper-slide>slide2</swiper-slide>
  <!-- 以下控件元素均為可選 -->
  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
  <div class="swiper-scrollbar"  slot="scrollbar"></div>
</swiper>

</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default{

components: {
  swiper,
  swiperSlide
},
data () {
  return {
    swiperOption: {
      notNextTick: true,
    //  loop: true,
      pagination: '.swiper-pagination',
      slidesPerView: 'auto',
      centeredSlides: true,
      autoplay: 3000,
      paginationClickable: true,
      spaceBetween: 10,
      onSlideChangeEnd: swiper => {
        this.page = swiper.realIndex + 1
        this.index = swiper.realIndex
      }
    }
  }
},
computed: {
  swiper () {
    return this.$refs.mySwiper.swiper
  }
},
mounted () {
 // this.swiper.slideTo(0, 0, false)
}

}
</script>

回答
編輯回答
憶當(dāng)年

<swiper-slide>slide1</swiper-slide>
<swiper-slide>slide2</swiper-slide>
這是兩個(gè)輪播頁(yè)
這樣寫應(yīng)該可以
<swiper-slide>slide1,slide2</swiper-slide>
<swiper-slide></swiper-slide>

2018年7月29日 16:20
編輯回答
茍活

回調(diào)函數(shù)沒走的原因是,現(xiàn)在swiper用的4.0版本,要on:{init:xxx,slideChangeTransitionEnd:xxx},
很多方法都改掉了,要去看官方文檔

2017年1月12日 11:36
編輯回答
司令

我遇到這個(gè)options一堆沒用,我想要用的回調(diào)函數(shù)都沒走,我不知道為毛

2018年8月22日 15:44
編輯回答
眼雜

換回以前的2.5.4版本就可以了

2017年3月2日 20:08