rip rop scrollbar obj callback 做的 start script let

一、vue-awesome-swiper的使用

1、在項目中全局引用

import VueAwesomeSwiper from ‘vue-awesome-swiper‘
// require styles
import ‘swiper/dist/css/swiper.css‘
Vue.use(VueAwesomeSwiper /* { default global options } */)

引入之後，在文件中直接使用

       <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">
                  <img :src="item.image" />
                </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、在組件中局部

文件中導入

 import ‘swiper/dist/css/swiper.css‘
 import { swiper, swiperSlide } from ‘vue-awesome-swiper‘　　

註冊組件

components: {
   swiper，
   swiperSlide
},　　

html中的寫法和全局引入時的一樣　

二、問題

1、swiper外加了v-if，無法讀取this.$refs,也就是通過this.$refs無法拿到swiper對象，無法在滑動卡片之後拿到我想要的當前的card的位置，去掉v-if通過this.$refs可以讀到swiper對象。

打印this，可以看到有swiper對象，但是讀出來卻沒有

data() {
    return {
      swiperOption: {
          width: 234,
          onSlideChangeStart: swiper => {
            let i = swiper.activeIndex;
            this.currentCardId = i
            console.log(‘index:‘, i)
          },
      }
    }
},

mounted() { // current swiper instance // 然後你就可以使用當前上下文內的swiper對象去做你想做的事了 console.log(this, this.swiper, this.$refs, this.$refs.mySwiper) // console.log(‘this is current swiper instance object‘, this.swiper) // this.swiper.slideTo(3, 1000, false) },

當前版本用的是swiper3，可以使用onSlideChangeStart方法來監聽事件，從而獲取到swiper對象，拿到當前元素的屬性。

2、給swiper-slide動態添加class類，css無效。

所以我最終將需要給偏移值的第一個swiper-slide直接寫死了class

總結：這兩個問題都涉及到渲染問題。

未完待續。。。

　　

記使用vue-awesome-swiper遇到的一些問題