解決swiper4在vue專案中loop迴圈輪播失效
阿新 • • 發佈:2018-12-12
在vue(2.5.x)中使用swiper(4.3.3),輪播加了autoplay和loop、observer、observeParents等引數還是很詭異的無法迴圈輪播;
那麼可以這樣寫程式碼試試:
<template> <div class="swiper-container banner"> <div class="swiper-wrapper"> <div v-for='(item, i) in banner_list' :key='i' class="swiper-slide"> <router-link :to="{ path: '/details', query: {id: item.id}}"> <img :src='item.picUrl' alt="圖片載入失敗"> </router-link> </div> </div> <!-- 如果需要分頁器 --> <div class="swiper-pagination"></div> <!-- 如果需要導航按鈕 --> <!-- <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> --> <!-- 如果需要滾動條 --> <!-- <div class="swiper-scrollbar"></div> --> </div> </template> <script> import Swiper from 'swiper' export default { data () { return { banner_list: [] } }, methods: { initSwiper () { this.swiper = new Swiper('.banner', { loopAdditionalSlides: 3, loop: true, autoplay: {// 自動滑動 disableOnInteraction: false }, pagination: {// 如果需要分頁器 el: '.swiper-pagination' }, observer: true, // 啟動動態檢查器(OB/觀眾/觀看者) observeParents: true // 修改swiper的父元素時,自動初始化swiper // updateOnImagesReady: true // 如果需要前進後退按鈕 // navigation: { // nextEl: '.swiper-button-next', // prevEl: '.swiper-button-prev' // } // 如果需要滾動條 // scrollbar: { // el: '.swiper-scrollbar' // } }) } }, mounted () { this.$http.get('/api/banner/list').then(res => { let { data } = res if (data.code === 0) { this.banner_list = data.data // 解決方法: 在獲取完資料後,將swiper放在$nextTick下一個UI幀再初始化。 this.$nextTick(() => { this.initSwiper() }) } }) } } </script>