vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

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

1. <template>
2. <div>
3. <swiper :options="swiperOption"  ref="mySwiper">
4. <!-- 这部分放你要渲染的那些内容 -->
5. <swiper-slide v-for="item in items">
6. </swiper-slide>
7. <!-- 这是轮播的小圆点 -->
8. <div class="swiper-pagination" slot="pagination"></div>
9. </swiper>
10. </div>
11. </template>
12. <script>
13. import { swiper, swiperSlide } from 'vue-awesome-swiper'
14. export default {
15. components: {
16. swiper,
17. swiperSlide
18. },
19. data() {
20. return {
21. swiperOption: {
22. //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
23. notNextTick: true,
24. pagination: '.swiper-pagination',
25. slidesPerView: 'auto',
26. centeredSlides: true,
27. paginationClickable: true,
28. spaceBetween: 30,
29. onSlideChangeEnd: swiper => {
30. //这个位置放swiper的回调方法
31. this.page = swiper.realIndex+1;
32. this.index = swiper.realIndex;
33. }
34. }
35. }
36. }
37. }
38. </script>
39. <style>
40. </style>