這次為大家帶來vue外掛實現行動端輪播圖，vue外掛實現行動端輪播圖的注意事項有哪些，以下就是實戰案例，一起來看一下。
果然基於Vue的插件還是很多的，於是就搜到了vue-awesome-swiper，是基於Vue和Swiper開發的輪播圖插件，但是看API寫出來的怎麼總是報警告啊… …還是自己研究研究吧…
本文只適用於Vue鷹架中的使用，CDN引入並使用參考文章最後API連結。
安裝
npm
#npm install vue-awesome-swiper --save
#全域引入
在入口檔案main.js中進行引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require stylesimport 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)局部引入
在需要用到輪播圖的vue頁面中引入
import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'並在components中加入swiper
#components:{
swiper,
swiperSlide
}使用
html結構
<swiper :options="swiperOption">
<swiper-slide v-for="slide in swiperSlides" :key="slide.id">I'm Slide {{ slide }}</swiper-slide>
<p class="swiper-pagination" slot="pagination"></p></swiper>data：
export default {
data () { return {
swiperOption: {
autoplay:true,//自动切换
pagination: {
el: '.swiper-pagination'//分页器
}
},
swiperSlides: [1, 2, 3]
}
}
｝以上能實現基本的輪播圖效果，其他效果參考Swiper官方API並在swiperOption中進行參數屬性的設定即可。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
建議閱讀：
以上是vue外掛實現行動端輪播圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！
