这篇文章主要讲解了“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轮播图插件”的内容了,经过本文的学习后,相信大家对vue中如何使用vue-awesome-swiper轮播图插件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://my.oschina.net/u/4580264/blog/4455383