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

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

分类： javascript 545阅读阅读模式

数据出自 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>
  22. <script lang="ts">
  23. import type { Swiper as SwiperType } from 'swiper'
  25. import { defineComponent, ref, onMounted, nextTick } from 'vue'
  26. import { Autoplay } from 'swiper'
  27. import { Swiper, SwiperSlide } from 'swiper/vue'
  28. import 'swiper/css'
  29. import 'swiper/css/autoplay'
  30. import 'swiper/css/navigation'
  31. import 'swiper/css/pagination'
  33. export default defineComponent({
  34.   name: 'EXP',
  35.   components: { Swiper, SwiperSlide },
  36.   // props: { },
  37.   setup() {
  38.     const datalist = ref<number[]>([])
  39.     const swp = ref<SwiperType | null>(null)
  40.     const swiperModules = [Autoplay]
  42.     function getRandom(min, max) {
  43.       return Math.floor(Math.random() * (max - min + 1) + min)
  44.     }
  46.     function getRandomArr() {
  47.       const res: number[] = []
  48.       const len = parseInt(String(Math.random() * 100))
  49.       for (let i = 0; i < len; i++) {
  50.         res.push(getRandom(1, 1000))
  51.       }
  52.       return res
  53.     }
  55.     function initData() {
  56.       datalist.value = getRandomArr()
  57.       updateSwiper()
  59.       setTimeout(() => {
  60.         initData()
  61.       }, 10000)
  62.     }
  64.     function handleSwiper(swiper: SwiperType) {
  65.       // init
  66.       swp.value = swiper
  67.     }
  69.     function handleSlideChange(swiper: SwiperType) {
  70.       // change
  71.       console.log('swiper slide change ==>', swiper)
  72.     }
  74.     function updateSwiper() {
  75.       const swpUp = swp.value as SwiperType
  76.       if (!swp.value) {
  77.         return
  78.       }
  80.       nextTick(() => {
  81.         swpUp.updateSlides()
  83.         swpUp.slideTo(0, 0)
  85.         swpUp.autoplay?.start()
  87.         swpUp.update()
  88.       })
  89.     }
  91.     onMounted(() => {
  92.       setTimeout(() => {
  93.         initData()
  94.       }, 3000)
  95.     })
  97.     return {
  98.       datalist,
  100.       handleSwiper,
  101.       handleSlideChange,
  102.       swiperModules,
  103.     }
  104.   },
  105. })
  106. </script>
  108. <style lang="scss">
  109. .swiper {
  110.   &-box {
  111.     width: 100%;
  112.     height: 300px;
  113.   }
  114.   &-item {
  115.     width: 100%;
  116.     height: 30px;
  117.     border-bottom: 1px solid #eee;
  118.   }
  119. }
  121. </style>

 

 

提示：回复可见的文章，回复评论成功后，需要刷新页面才能看到被隐藏的内容！
永久固定短链接地址：
本文由大朗编写，如有错漏或其他不当，请在下方留言，欢迎指正。

相关文章

评论一下

暂无评论