vue中怎么使用vue-awesome-swiper轮播图插件

vue中怎么使用vue-awesome-swiper轮播图插件，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper)

然后就可以在组件中使用该插件

<template>    <div>      <swiper :options="swiperOption" ref="mySwiper">        <!-- 这部分放你要渲染的那些内容 -->        <swiper-slide v-for="item in items">        </swiper-slide>        <!-- 这是轮播的小圆点 -->        <div class="swiper-pagination" slot="pagination"></div>      </swiper>    </div>  </template>  <script>    import { swiper, swiperSlide } from 'vue-awesome-swiper'    export default {      components: {        swiper,        swiperSlide      },      data() {        return {          swiperOption: {          //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true          notNextTick: true,          pagination: '.swiper-pagination',          slidesPerView: 'auto',          centeredSlides: true,          paginationClickable: true,          spaceBetween: 30,            onSlideChangeEnd: swiper => {              //这个位置放swiper的回调方法              this.page = swiper.realIndex+1;              this.index = swiper.realIndex;            }          }        }      },      //定义这个sweiper对象      computed: {          swiper() {         return this.$refs.mySwiper.swiper;        }      },      mounted () {        //这边就可以使用swiper这个对象去使用swiper官网中的那些方法        this.swiper.slideTo(0, 0, false);      }      }  </script>  <style>  </style>

看完上述内容，你们掌握vue中怎么使用vue-awesome-swiper轮播图插件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！