vue轮播图插件vue-awesome-swiper的使⽤代码实例
最近写vue2.0项⽬中⽤到了轮播图的⼀个插件，也就是vue-awesome-swiper，个⼈感觉还是⽐较强⼤的，swiper官⽹中的API及配置均可使⽤(⽀持3.0)，以下说下使⽤该插件的⼀些步骤：
第⼀步安装
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">
js实现轮播图最简代码<!-- 这部分放你要渲染的那些内容 -->
<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 = alIndex+1;
this.index = alIndex;
}
}
}
},
//定义这个sweiper对象
computed: {
swiper() {
return this.$Swiper.swiper;
}
},
mounted () {
//这边就可以使⽤swiper这个对象去使⽤swiper官⽹中的那些⽅法
this.swiper.slideTo(0, 0, false);
}
}
</script>
<style>
</style>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。