首頁  >  文章  >  web前端  >  vue外掛實現行動端輪播圖

vue外掛實現行動端輪播圖

php中世界最好的语言
php中世界最好的语言原創
2018-03-19 10:59:164411瀏覽

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn