vue輪播圖插件vue-awesome-swiper的使用代碼實例
更新時間:2017年07月10日 11:42:08 作者:xiaogezl
本篇文章主要介紹了vue輪播圖插件vue-awesome-swiper的使用代碼實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
最近寫vue2.0項目中用到了輪播圖的一個插件,也就是vue-awesome-swiper,個人感覺還是比較強大的,swiper官網(wǎng)中的API及配置均可使用(支持3.0),以下說下使用該插件的一些步驟:
第一步安裝
npm install vue-awesome-swiper --save
第二部在main.js中引入
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper)
然后就可以在組件中使用該插件
<template> <div> <swiper :options="swiperOption" ref="mySwiper"> <!-- 這部分放你要渲染的那些內(nèi)容 --> <swiper-slide v-for="item in items"> </swiper-slide> <!-- 這是輪播的小圓點 --> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }, data() { return { swiperOption: { //是一個組件自有屬性,如果notNextTick設置為true,組件則不會通過NextTick來實例化swiper,也就意味著你可以在第一時間獲取到swiper對象,假如你需要剛加載遍使用獲取swiper對象來做什么事,那么這個屬性一定要是true notNextTick: true, pagination: '.swiper-pagination', slidesPerView: 'auto', centeredSlides: true, paginationClickable: true, spaceBetween: 30, onSlideChangeEnd: swiper => { //這個位置放swiper的回調(diào)方法 this.page = swiper.realIndex+1; this.index = swiper.realIndex; } } } }, //定義這個sweiper對象 computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted () { //這邊就可以使用swiper這個對象去使用swiper官網(wǎng)中的那些方法 this.swiper.slideTo(0, 0, false); } } </script> <style> </style>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue開發(fā)調(diào)試神器vue-devtools使用詳解
這篇文章主要為大家詳細介紹了vue開發(fā)調(diào)試神器vue-devtools的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07vue中modal傳輸數(shù)據(jù)并刷新部分頁面數(shù)據(jù)方式
這篇文章主要介紹了vue中modal傳輸數(shù)據(jù)并刷新部分頁面數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04使用vue-virtual-scroller遇到的問題及解決
這篇文章主要介紹了使用vue-virtual-scroller遇到的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03