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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.