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>  

转载于:https://www.cnblogs.com/cina33blogs/p/6760820.html