基于Vue的轮播组件Vue-Awesome-Swiper
Swiper是一个开源、免费、强大的触摸滑动插件。Vue-Awesome-Swiper是一个基于 Swiper4 和 Vue 的轮播组件,Vue-Awesome-Swiper也支持服务端渲染和单页应用。下面雷雪松给大家介绍一下Vue的轮播组件Vue-Awesome-Swiper。
1、Vue-Awesome-Swiper安装
1 | npm install vue-awesome-swiper |
2、Vue-Awesome-Swiper用法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <template> <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <!-- 每一个滑动slide--> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> <!-- 分页器和控制按钮--> <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> </template> <script> import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { name: 'swiper-demo', components: { swiper, swiperSlide } data() { return { swiperOption: { // 所有的参数同 swiper 官方 api 参数 // ... } } }, computed: { swiper() { return this.$refs.mySwiper.swiper } }, mounted() { //可以是用swiper对象的方法了 this.swiper.slideTo(3, 1000, false) } } </script> |