Swiper 可以說是目前最知名的輪播效果的第三方套件了，它並不需要使用 jQuery ，也可以和多種前端框架 ( 如 React, Vue…等) 進行整合。雖說 npm 上頭已有 vue-awesome-swiper 的整合套件，但這回想採用 CDN 的方式引入，順便搭配最新的 Vue 3 來作使用。以下有筆記心得兼採坑過程。
版本
- Swiper：6.3.5
- Vue：3.0.3
程式碼
- 在 DOM 元素都載入完後，才宣告出一個新的 Swiper Instance。當你使用 Composition API，可以直接在 Vue Instance 內取出 onMounted 做操作
- 可使用 Vue 的 nextTick 方法，強迫 Vue 來進行重新渲染的動作。不過這必須要搭配套件本身具有 Update 的功能，如 Swiper Instance 提供的 swiper.update()
- swiper-container 外層視情況要加入一層 div，這樣就可以控制 swiper-container 的大小。一般而言，這 div 的寬與高會和 swiper-container 所含的圖片、文字內容是一樣的
- 小心 class 的名稱：swiper-container > swiper-wrapper > swiper-slide
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
const {ref, reactive, onMounted, watch, nextTick } = Vue const App = { setup(){ const images = ref([]); let swiper = null watch(images,(newVal)=>{ nextTick(()=>{ swiper.update() }) }); onMounted(async function(){ await axios.get('https://run.mocky.io/v3/fe4354a8-0cfb-4de0-9a39-8a2504f996cf').then(res=>{ images.value = res.data }) swiper = new Swiper('.swiper-container', { pagination:{ el:'.swiper-pagination' } }); }); return { images }; } }; Vue.createApp(App).mount("#app") |
