這次為大家帶來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中文網其他相關文章!