vue外掛實現行動端輪播圖

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

建議閱讀：

flex佈局的使用

#input複選框checkbox的樣式修改

以上是vue外掛實現行動端輪播圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！