vue swiper的使用

1.npm 安装

npm install vue-awesome-swiper@4.0.4 --save -dev
npm install swiper@4 --save -dev

2.引用

(1)全局引用，在main.js中

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

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

Vue.use(VueAwesomeSwiper)

(2)局部引用

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

export default {
  components: {
    swiper,
    swiperSlide
  }
}

3.使用swiper

	<swiper ref="mySwiper" :options="swiperOptions">
       	<swiper-slide v-for="(item, index) in noticeList" :key="index">
         	{{item.name}}
       	</swiper-slide>
       	<div class="swiper-button-prev" slot="pagination">上一条</div>
		<div class="swiper-button-next" slot="pagination">下一条</div>
	</swiper>

 data() {
    return {
      swiperOptions: {
        direction : 'vertical', // 方向
        navigation: { // 切换上一页下一页
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        loop : true, // 是否循环轮播
        autoplay: { // 是否自动轮播
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false, // 手动切换页面后，继续自动轮播
        },
        slidesPerView: 4,
        spaceBetween: 0,
        observer: true,
        observeParents: true,
      },
 },
 components: {
    Swiper,
    SwiperSlide,
  },
 computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },