vue-13-swiper組件的使用

vue-13-swiper

是一個滑動庫, 很是豐富的滑動樣式, 輪播圖等

https://www.swiper.com.cn
https://github.com/surmon-china/vue-awesome-swiper

1, 基本

1.1) 安裝

npm install vue-awesome-swiper --save

1.2) 全局引用

css 單獨引入, 在swiper3 中幹掉了, 但反應很差, 因此在swiper4 中又加了回來

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

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

1.3) 局部引入

// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

2. 使用

2.1) 靜態數據的使用 (使用方式不多)

<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>

2.2) 動態數據的引用

須要在 main.js中引入

// 使用 ssr的方式
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}

而後在使用

<template>

  <div>
    ssr的寫法

    <div v-swiper:mySwiper="swiperOption" @someSwiperEvent="callback">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="banner in banners">
          <img :src="banner">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

  </div>

</template>

<script>
  export default {
    name: "SSR-saiper",
    data () {
      return {
        banners: [
          'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092',
          'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092',
          'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092' ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            autoplay: true,
          },
          // some swiper options...
        },
        mounted() {
          setTimeout(() => {
            this.banners.push('/4.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, 1000, false)
        }
      }
    },
  }
</script>

<style scoped>

</style>

本地圖片須要 require

require("../assets/slideShow/j1.jpg"),
                require("../assets/slideShow/j2.jpg"),
                require("../assets/slideShow/j3.jpg"),
                require("../assets/slideShow/j4.jpg")

2.3) 異步數據的使用

數據使用異步的方式進行加載

<template>

  <div>
    spa 的方式 使用 swiper， 寫死的
    <swiper :options="swiperOption">
      <swiper-slide v-for="(slidee, index) in swiperSlides" :key="index">
        <img v-bind:src="slidee"/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

  </div>

</template>

<script>
  export default {
    name: "SPA-swiper",
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            autoplay: true,
          }
        },
        swiperSlides: [
          'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092',
          'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092',
          'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092',
          'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092',
          'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092',
        ]
      }
    },
    mounted() {
      setInterval(() => {
        console.log('simulate async data')
        if (this.swiperSlides.length < 10) {
          this.swiperSlides.push(this.swiperSlides.length + 1)
        }
      }, 3000)
    }

  }
</script>

<style scoped>

</style>

添加其餘的屬性:

swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            autoplay: true,
          },
          effect : 'coverflow',
          slidesPerView: 3,
          centeredSlides: true,
        },
        mounted() {

        }