vue-awesome-swiper

Posted 2020-10-12 静静的fire

npm install vue-awesome-sw

 1 main.js
import VueAwesomeSwiper from ‘vue-awesome-swiper‘
Vue.use(VueAwesomeSwiper)
<template>
 2   <div>
 3     <swiper :options="swiperOption" ref="mySwiper">
 4      <!-- 务必加上key 2.0后-->
 5       <swiper-slide v-for="(item,index) in recommends" :key="index">
 6         <img :src="item.picUrl">
 7       </swiper-slide>
 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 require(‘swiper/dist/css/swiper.css‘)//必须 不然样式不能生效
15 export default {
16   data () {
17     return {
18       swiperOption: {
19         notNextTick: true,
20         autoplay: 3000,
21         pagination: ‘.swiper-pagination‘,
22         paginationClickable: true,
23         mousewheelControl: true,
24         autoplayDisableOnInteraction: false,//移动端加上这个不然不会滚动
25         loop: true,//环路
26         observeParents: true,
27         onSlideChangeEnd: swiper => {
28           this.page = swiper.realIndex + 1
29           this.index = swiper.realIndex
30         }
31       }
32     }
33   },
34   components: {
35     swiper,
36     swiperSlide
37   },
38   computed: {
39     swiper () {
40       return this.$refs.mySwiper.swiper
41     }
42   },
43   mounted () {
44     this.swiper.slideTo(0, 0, false)
45   }
46 }
47 
48 </script>

 

iper --save