1. 程式人生 > >快速入門在Vue中使用滑動外掛Swiper

快速入門在Vue中使用滑動外掛Swiper

前言

swiper

開源、免費、強大的滑動外掛。

swiper中文網

https://www.swiper.com.cn/

Swiper4中文API

https://www.swiper.com.cn/api/index.html

Vue-Awesome-Swipwe

基於Swiper、適用於Vue的輪播元件,支援服務端和單頁引用。

外掛npm

https://www.npmjs.com/package/vue-awesome-swiper

線上demo

https://surmon-china.github.io/vue-awesome-swiper/

效果

場景

home.vue是仿音樂播放器的主頁面,在home介面引入了Swiper_Banner.vue這個元件用來實現輪播圖。

在Swiper_Banner.vue,滾動的圖片已經寫死,放在assets下的img目錄下。

專案目錄結構

實現

1.安裝vue-awesome-swiper外掛

專案根目錄下開啟命令列輸入:

npm install --save vue-awesome-swiper

或者

cnpm install --save vue-awesome-swiper

2.home.vue中引入Swiper_Banner.vue元件

開啟home.vue

引入元件

import SwiperBanner from "../components/Swiper_Banner"

其中../表示上級目錄。

注入元件

export default {
    name:"home",
    components:{
    SwiperBanner
    }
}

引用元件

<template lang="html">
  <div class="">
    <TodayRecommend/>
    <NewsMusic />
    <SwiperBanner/>
  </div>
</template>

home.vue 完整程式碼

<template lang="html">
  <div class="">
    <TodayRecommend/>
    <NewsMusic />
    <SwiperBanner/>
  </div>
</template>

<script>
import TodayRecommend from "../components/Today_Recommend"
import NewsMusic from "../components/News_Music"
import SwiperBanner from "../components/Swiper_Banner"
export default {
    name:"home",
    components:{
    TodayRecommend,
    NewsMusic,
    SwiperBanner
    }
}
</script>

<style lang="css">
</style>

3.在Swiper_Banner.vue中配置輪播圖

開啟輪播圖元件Swiper_Banner.vue

首先引入swiper以及swiper的樣式檔案

(區域性註冊:參照:https://www.npmjs.com/package/vue-awesome-swiper

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

進行元件引入宣告

 

 components: {
    swiper,
    swiperSlide
  }

頁面新增swiper元件元素

參照:

https://www.npmjs.com/package/vue-awesome-swiper

下的SPA:

<!-- The ref attr used to find the swiper instance -->
<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- 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>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          // some swiper options/callbacks
          // 所有的引數同 swiper 官方 api 引數
          // ...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然後你就可以使用當前上下文內的swiper物件去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

這裡只要分頁器,別的屬性不配置,

配置引數參照官方API引數:

https://www.swiper.com.cn/api/pagination/362.html

此處為:

<template lang="html">
  <div class="banner">
    <swiper :options="swiperOption">
      <swiper-slide>
        <img src="../assets/img/b1.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/img/b2.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/img/b3.jpg" alt="">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

配置swiper元件屬性

export default {
  data(){
    return{
      swiperOption:{
        pagination: {
          el: '.swiper-pagination',//swiper的分頁器
        },
        autoplay:{
          delay:1000,//間隔一秒滾動一次
        }//自動滾動
      }
    }
  },

Swiper_Banner.vue完整程式碼

<template lang="html">
  <div class="banner">
    <swiper :options="swiperOption">
      <swiper-slide>
        <img src="../assets/img/b1.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/img/b2.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/img/b3.jpg" alt="">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  data(){
    return{
      swiperOption:{
        pagination: {
          el: '.swiper-pagination',//swiper的分頁器
        },
        autoplay:{
          delay:1000,//間隔一秒滾動一次
        }//自動滾動
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<style scoped>

.banner{
  padding: 10px;
}

</style>