vue-swiper的使用

Posted 2020-10-13 JaydenLD@Clara

1.安装依赖

npm install vue-awesome-swiper --save

2.引入并注册

import Vue from ‘vue‘
import VueAwesomeSwiper from ‘vue-awesome-swiper‘
//也可以用require
//var Vue = require(‘vue‘)
//var VueAwesomeSwiper = require(‘vue-awesome-swiper‘)

Vue.use(VueAwesomeSwiper)

3.组件中的使用

<template>
  <div class="swiper1">
    <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>
  </div>
</template>

<script>
require(‘../assets/swiper-3.4.2.min.css‘)

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

export default {
  name:"swiper1",
  components: {
    swiper,
    swiperSlide
  },
  data() {
      return {
        swiperOption: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
          // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
          notNextTick: true,
          // swiper configs 所有的配置同swiper官方api配置
          autoplay: 1000,
          // 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,
          // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
          debugger: true,
        }
      }
    },
}
</script>

<style scoped>

</style>

注意:需要手动引入swiper的css样式,可以去swiper的官网进行下载