vue輪播圖

vue開發中遇到這樣一個需求實現導航欄和中間內容相結合實現頁面滑動導航跟隨改變的效果。看效果：

這里我用的是vue所帶的插件：vue-awesome-swiper，傳送門：https://www.npmjs.com/package/vue-awesome-swiper

這個api純英文，不過不是很難理解，大家只需要看那些地方有需要，可以copy=>paste到自己的地方。

准備：

1.node 環境 vue環境

2.vue init webpack project

3.npm install vue-awesome-swiper   

這里講解下上述demo的實現的思路

一：首先需要先實現導航的點擊變色

這個我們只需要添加自定義屬性，分別給定下標0，1，2添加同一個點擊事件。

通過傳值$event獲得自定義屬性，但后動態添加類名，給改類名設置樣式即可。

 

二：我們要實現點擊導航滑塊滑倒對應的位置

我們只需要調用api：this.swiper.slideTo(res.target.dataset.current, 1000, false)；第一個參數為下標，1000=1s

點擊的下標賦給第一個參數即可實現點擊導航到對應的滑塊。

三：實現滑塊滑動改變data屬性，改變類名所依賴的判斷：

這里我們可以給最外層的swiper標簽添加屬性：@slideChangeTransitionEnd="moveEnd('滑塊移動結束')"

通過調用moveEnd，再滑塊結束后通過this.swiper獲取元素當前的下標記得是activeIndex;

然后將改為類名所以來的virtualDom即可。

思路整理就是這樣，下面附上主要代碼：

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

 

index.vue

<template>
  <div class="swiper">
    <a href="#" :class="currentTab==0?'focus':''" data-current="0" @click="switchTab('點擊了slider1',$event)">slider1</a>
    <a href="#" :class="currentTab==1?'focus':''" data-current="1" @click="switchTab('點擊了slider1',$event)">slider2</a>
    <a href="#" :class="currentTab==2?'focus':''" data-current="2" @click="switchTab('點擊了slider1',$event)">slider3</a>
    <swiper :options="swiperOption" ref="mySwiper" @slideChangeTransitionEnd="moveEnd('滑塊移動結束')">
      <swiper-slide v-for="(item, index) in slides" :key="index"><img :src="item"></swiper-slide>
    </swiper>
  </div>
</template>
<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
  export default{
    name: 'test2',
    data(){
      return {
        currentTab: 0,
        slides: [
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511015180050&di=0d2ee92eead284e8133d6df07535d75a&imgtype=0&src=http%3A%2F%2Fimg.sc115.com%2Fuploads1%2Fsc%2Fjpgs%2F1512%2Fapic16988_sc115.com.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511015180167&di=7412fd486c47c15f1d27485be0d7bd28&imgtype=0&src=http%3A%2F%2Fwww.duoxinqi.com%2Fimages%2F2012%2F06%2F20120605_8.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511015180167&di=3bcedd33a30129b9951be2a81f9b505c&imgtype=0&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0420%2F06%2F05.jpg'
        ],
        //輪播config
        swiperOption: {
          // 如果自行設計了插件，那么插件的一些配置相關參數，也應該出現在這個對象中，如下debugger
          debugger: true,
//          autoplay: true,
//          loop: true,
          slidesPerView: "auto",//設置slider容器能夠同時顯示的slides數量(carousel模式)。可以設置為數字（可為小數，小數不可loop），或者 'auto'則自動根據slides的寬度來設定數量。loop模式下如果設置為'auto'還需要設置另外一個參數loopedSlides。
          centeredSlides: true,//<span style="color:rgb(68,68,68);font-family:'microsoft yahei';font-size:13px;">設定為true時，活動塊會居中，而不是默認狀態下的居左。</span>
          hashNavigation: true,
        }
      }
    },
    methods: {
      switchTab: function (prompt,res) {
//        console.log(prompt,res.target.dataset.current);
        this.currentTab = res.target.dataset.current;
        this.swiper.slideTo(res.target.dataset.current, 1000, false)
      },
      moveEnd: function(prompt){
        console.log(prompt);
        let oIndex = this.swiper.activeIndex;
        console.log(oIndex);
        this.currentTab = oIndex;
//        if(oIndex <= 2) {
//          this.currentTab = oIndex;
//        } else {
//          this.currentTab = oIndex - 3;
//        }
      }
    },
    mounted() {
      console.log('this is current swiper instance object', this.swiper);
    },
    components: {
      swiper,
      swiperSlide
    },
    computed: {
      swiper () {
        return this.$refs.mySwiper.swiper
      }
    }
  }
 
</script>
<style scoped>
.swiper {
  margin: 10px auto;
  width: 10rem;
  height: 6.4rem;
  /*overflow: hidden;*/
}
  .swiper .swiper-slide {
    width: 8.53rem;
    height: 6.4rem;
  }
  .swiper-slide.swiper-slide-active img{
    margin-top: 0;
    width: 100%;
    height: 100%;
  }
  .swiper img {
    display: block;
    margin: 0 auto;
    margin-top: 3.5%;
    width: 90.635%;
    height: 90.625%;
    vertical-align: middle;
    -webkit-transition: all .5s ease 0s;
    -moz-transition: all .5s ease 0s;
    -ms-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    transition: all .5s ease 0s;
  }
  .focus {
    color: red;
  }
</style>

總結至此，vue實現輪播圖的添加算完成，希望對小伙伴們有用，記得點贊哦。