解决 swiper/vue autoplay 不能自动播放问题

当前位置: 首页 » 记录 » javascript » 解决 swiper/vue autoplay 不能自动播放问题

分类: javascript 3807阅读阅读模式

数据出自 https://swiperjs.com/vue

根据实际前后数据更新时,autoplay并未执行,需要通过初始化实例后进行 start()

示例如下:

  1. <template>
  2.   <swiper
  3.     class="swiper-box"
  4.     :modules="swiperModules"
  5.     slides-per-view="auto"
  6.     direction="vertical"
  7.     :speed="2000"
  8.     :free-mode="true"
  9.     :observer="true"
  10.     :autoplay="{
  11.       delay: 0,
  12.       disableOnInteraction: false,
  13.     }"
  14.     @swiper="handleSwiper"
  15.     @slide-change="handleSlideChange">
  16.     <swiper-slide class="swiper-item" v-for="(item, index) in datalist" :key="index">
  17.       {{ item }}
  18.     </swiper-slide>
  19.   </swiper>
  20. </template>
  21. <script lang="ts">
  22. import type { Swiper as SwiperType } from 'swiper'
  23. import { defineComponent, ref, onMounted, nextTick } from 'vue'
  24. import { Autoplay } from 'swiper'
  25. import { Swiper, SwiperSlide } from 'swiper/vue'
  26. import 'swiper/css'
  27. import 'swiper/css/autoplay'
  28. import 'swiper/css/navigation'
  29. import 'swiper/css/pagination'
  30. export default defineComponent({
  31.   name: 'EXP',
  32.   components: { Swiper, SwiperSlide },
  33.   // props: { },
  34.   setup() {
  35.     const datalist = ref<number[]>([])
  36.     const swp = ref<SwiperType | null>(null)
  37.     const swiperModules = [Autoplay]
  38.     function getRandom(min, max) {
  39.       return Math.floor(Math.random() * (max - min + 1) + min)
  40.     }
  41.     function getRandomArr() {
  42.       const res: number[] = []
  43.       const len = parseInt(String(Math.random() * 100))
  44.       for (let i = 0; i < len; i++) {
  45.         res.push(getRandom(1, 1000))
  46.       }
  47.       return res
  48.     }
  49.     function initData() {
  50.       datalist.value = getRandomArr()
  51.       updateSwiper()
  52.       setTimeout(() => {
  53.         initData()
  54.       }, 10000)
  55.     }
  56.     function handleSwiper(swiper: SwiperType) {
  57.       // init
  58.       swp.value = swiper
  59.     }
  60.     function handleSlideChange(swiper: SwiperType) {
  61.       // change
  62.       console.log('swiper slide change ==>', swiper)
  63.     }
  64.     function updateSwiper() {
  65.       const swpUp = swp.value as SwiperType
  66.       if (!swp.value) {
  67.         return
  68.       }
  69.       nextTick(() => {
  70.         swpUp.updateSlides()
  71.         swpUp.slideTo(0, 0)
  72.         swpUp.autoplay?.start()
  73.         swpUp.update()
  74.       })
  75.     }
  76.     onMounted(() => {
  77.       setTimeout(() => {
  78.         initData()
  79.       }, 3000)
  80.     })
  81.     return {
  82.       datalist,
  83.       handleSwiper,
  84.       handleSlideChange,
  85.       swiperModules,
  86.     }
  87.   },
  88. })
  89. </script>
  90. <style lang="scss">
  91. .swiper {
  92.   &-box {
  93.     width: 100%;
  94.     height: 300px;
  95.   }
  96.   &-item {
  97.     width: 100%;
  98.     height: 30px;
  99.     border-bottom: 1px solid #eee;
  100.   }
  101. }
  102. </style>

 

 

相关文章

评论一下

暂无评论