vue轮播图插件vue-awesome-swiper(2)
异步数据例子
<template> <swiper :options="swiperOption"> <swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </template> <script> export default { name: 'carrousel', data() { return { swiperOption: { autoplay: 3500, setWrapperSize :true, pagination : '.swiper-pagination', paginationClickable :true, mousewheelControl : true, observeParents:true, }, swiperSlides: [1, 2, 3, 4, 5] } }, mounted() { setInterval(() => { console.log('simulate async data') let swiperSlides = this.swiperSlides if (swiperSlides.length < 10) swiperSlides.push(swiperSlides.length + 1) }, 3000) } } </script>
移动端例子的代码
例子
SSR例子的代码
例子
API
参考官网: http://www.swiper.com.cn/api/index.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。