這篇文章主要介紹了vue中如何使用輪播圖插件vue-awesome-swiper，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年積累的網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有新市免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

Vue-Awesome-Swiper

輪播圖插件，可以同時支持Vue.js（1.X ~ 2.X），兼顧PC和移動端，SPA和SSR。

例子

例子

安裝設(shè)置

安裝Install vue-awesome-swiper

npm install vue-awesome-swiper --save

vue掛載

// import
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'


// or require
var Vue = require('vue')
var VueAwesomeSwiper = require('vue-awesome-swiper')


// mount with global
Vue.use(VueAwesomeSwiper)


// If used in Nuxt.js/SSR, you should keep it only in browser build environment
// The `Process. BROWSER_BUILD` itself is just a feature, it is only valid in Nuxt.js, you need to modify it according to your own procedures, such as: in vue official ssr scaffolding it should be` process.browser`
if (process.BROWSER_BUILD) {
 const VueAwesomeSwiper = require('vue-awesome-swiper/ssr')
 Vue.use(VueAwesomeSwiper)
}


// mount with component(can't work in Nuxt.js/SSR)
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
 components: {
  swiper,
  swiperSlide
 }
}

SPA與SSR中使用方法的區(qū)別

SPA通過組件作用，需要借助ref屬性查找swiper實例
SSR通過命令作用，需要借助命令參數(shù)查找swiper實例
其他配置和事件一致

SSR中的應(yīng)用

<!-- You can custom the "mySwiper" name used to find the swiper instance in current component -->
<template>
 <div v-swiper:mySwiper="swiperOption">
  <div class="swiper-wrapper">
   <div class="swiper-slide" v-for="banner in banners">
    <img :src="banner">
   </div>
  </div>
  <div class="swiper-pagination swiper-pagination-bullets"></div>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
    swiperOption: {
     autoplay: 5000,
     initialSlide: 1,
     loop: true,
     pagination: '.swiper-pagination',
     onSlideChangeEnd: swiper => {
      console.log('onSlideChangeEnd', swiper.realIndex)
     }
    }
   }
  },
  mounted() {
   console.log('app init')
   setTimeout(() => {
    this.banners.push('/5.jpg')
    console.log('banners update')
   }, 3000)
   console.log(
    'This is current swiper instance object', this.mySwiper, 
    'It will slideTo banners 3')
   this.mySwiper.slideTo(3)
  }
 }
</script>

SPA中的應(yīng)用

<!-- The ref attr used to find the swiper instance -->
<template>
 <swiper :options="swiperOption" ref="mySwiper">
  <!-- slides -->
  <swiper-slide>I'm Slide 1</swiper-slide>
  <swiper-slide>I'm Slide 2</swiper-slide>
  <swiper-slide>I'm Slide 3</swiper-slide>
  <swiper-slide>I'm Slide 4</swiper-slide>
  <swiper-slide>I'm Slide 5</swiper-slide>
  <swiper-slide>I'm Slide 6</swiper-slide>
  <swiper-slide>I'm Slide 7</swiper-slide>
  <!-- Optional controls -->
  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
  <div class="swiper-scrollbar"  slot="scrollbar"></div>
 </swiper>
</template>

<script>
 // swiper options example:
 export default {
  name: 'carrousel',
  data() {
   return {
    swiperOption: {
     // NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)
     // notNextTick是一個組件自有屬性，如果notNextTick設(shè)置為true，組件則不會通過NextTick來實例化swiper，也就意味著你可以在第一時間獲取到swiper對象，假如你需要剛加載遍使用獲取swiper對象來做什么事，那么這個屬性一定要是true
     notNextTick: true,
     // swiper configs 所有的配置同swiper官方api配置
     autoplay: 3000,
     direction : 'vertical',
     grabCursor : true,
     setWrapperSize :true,
     autoHeight: true,
     pagination : '.swiper-pagination',
     paginationClickable :true,
     prevButton:'.swiper-button-prev',
     nextButton:'.swiper-button-next',
     scrollbar:'.swiper-scrollbar',
     mousewheelControl : true,
     observeParents:true,
     // if you need use plugins in the swiper, you can config in here like this
     // 如果自行設(shè)計了插件，那么插件的一些配置相關(guān)參數(shù)，也應(yīng)該出現(xiàn)在這個對象中，如下debugger
     debugger: true,
     // swiper callbacks
     // swiper的各種回調(diào)函數(shù)也可以出現(xiàn)在這個對象中，和swiper官方一樣
     onTransitionStart(swiper){
      console.log(swiper)
     },
     // more Swiper configs and callbacks...
     // ...
    }
   }
  },
  // you can find current swiper instance object like this, while the notNextTick property value must be true
  // 如果你需要得到當(dāng)前的swiper對象來做一些事情，你可以像下面這樣定義一個方法屬性來獲取當(dāng)前的swiper對象，同時notNextTick必須為true
  computed: {
   swiper() {
    return this.$refs.mySwiper.swiper
   }
  },
  mounted() {
   // you can use current swiper instance object to do something(swiper methods)
   // 然后你就可以使用當(dāng)前上下文內(nèi)的swiper對象去做你想做的事了
   console.log('this is current swiper instance object', this.swiper)
   this.swiper.slideTo(3, 1000, false)
  }
 }
</script>

異步數(shù)據(jù)例子

<template>
 <swiper :options="swiperOption">
  <swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
 </swiper>
</template>

<script>
 export default {
  name: 'carrousel',
  data() {
   return {
    swiperOption: {
     autoplay: 3500,
     setWrapperSize :true,
     pagination : '.swiper-pagination',
     paginationClickable :true,
     mousewheelControl : true,
     observeParents:true,
    },
    swiperSlides: [1, 2, 3, 4, 5]
   }
  },
  mounted() {
   setInterval(() => {
    console.log('simulate async data')
    let swiperSlides = this.swiperSlides
    if (swiperSlides.length < 10) swiperSlides.push(swiperSlides.length + 1)
   }, 3000)
  }
 }
</script>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue中如何使用輪播圖插件vue-awesome-swiper”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)頁名稱：vue中如何使用輪播圖插件vue-awesome-swiper
本文來源：http://chinadenli.net/article10/ppicdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、關(guān)鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈、App設(shè)計、企業(yè)網(wǎng)站制作、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)