Note Some of the problems encountered with Vue-awesome-swiper

First, the use of Vue-awesome-swiper

1. Global references in Projects  

Import vueawesomeswiper from ' vue-awesome-swiper '//Require stylesimport ' Swiper/dist/css/swiper.css ' Vue.use ( Vueawesomeswiper/* {Default global options} */)

After introduction, use directly in the file

       <swiper:options= "Swiperoption" ref= "myswiper" @someSwiperEvent = "callback" >            <!--slides                        - <swiper-slide  v-for= "(item,index) in Newcards": key= "index" >              <div class= "Swiper-slide-item" >                <div class= "Slide-img-wrap" >                                  </div>              </div>            </swiper-slide>            <!--Optional Controls--            <!--<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>

2, in the components of the local

Import in File

Import ' swiper/dist/css/swiper.css ' import {swiper, swiperslide} from ' Vue-awesome-swiper '

Registering components

Components: {   swiper,   swiperslide},

The same notation in HTML as when it was introduced globally

Second, the question

1, Swiper plus v-if, unable to read this. $refs, that is, through this . $refs can't get the Swiper object, can't get the position of the current card I want after sliding the card, remove v-if through this.$ Refs can read the Swiper object.

Print this, you can see there are swiper objects, but read out but not

Data () {    return {      swiperoption: {          width:234,          onslidechangestart:swiper            = = = Swiper.activeindex;            This.currentcardid = i            console.log (' Index: ', I)},}}    ,

Mounted () {//current Swiper instance//then you can use the Swiper object in the context to do what you want Console.log (this, This.swiper, this. $refs, this . $refs. Myswiper)//Console.log (' This was current Swiper instance object ', This.swiper)//This.swiper.slideTo (3, 1000, False)},

The current version is Swiper3, and you can use the Onslidechangestart method to listen to the event and get to the Swiper object to get the properties of the current element.

2. Add class to Swiper-slide dynamically, the CSS is invalid.

So I will eventually need to give the first swiper-slide of the offset value a direct write to the dead class.

Summary: Both of these issues are related to rendering issues.

Not to be continued ...

　　

Note Some of the problems encountered with Vue-awesome-swiper