mint-ui 自身提供了前一頁，後一頁的function,這裡由於專案需求,點選任意tab都可跳轉到相應的圖片,所以自己封裝了一個function:switchCar。

Usage

import Mint from ‘mint-ui’;
import { Swipe, SwipeItem } from ‘mint-ui’;
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

html

switchCar 為點選tab切換輪播圖事件（我封裝的自定義跳轉事件）,
front

<ul >
    <li @click="switchCar(index)" :class="carIndex==index?'active':''" v-for="(car,index) in carConfig">{{car.name}}</li>
    <i class="border" ref="nav_border"></i>
</ul>
<div
 
>
    <i @click.stop="front()" class="fa fa-angle-left fa-btn banner-left" aria-hidden="true"></i>
    <i @click.stop="back()" class="fa fa-angle-right fa-btn banner-right" aria-hidden="true"></i>       
    <ul ref="carBox">
        <mt-swipe :show-indicators="false"
 
  ref="mtSwipe" @change="handleChange" :auto="0">
        <mt-swipe-item ref="mtItem" v-for="car in carConfig" :key="car.name"><img :src="car.img_src"/></mt-swipe-item>                  
        </mt-swipe>
        <p class="car_title">{{carConfig[carIndex].name}} 起步價: ￥{{curCarConfig.price}}</p>
    </ul>
</div>

js

            front(){   //前一頁
                this.$refs.mtSwipe.prev();
            },
            back(){    //後一頁
                this.$refs.mtSwipe.next();
            },
            handleChange(index){    //跳轉之後獲取當前的下標
                this.carIndex = index;
            },
            switchCar(index)    //自定義跳轉，只需要傳圖片的下標即可
            {
                if(index==this.carIndex)
                {
                    console.log('break off');
                    return;
                }


                 var callback = () => {
                  if (index !== undefined) {
                    var newPage = this.$refs.mtItem[index].$el;
                    removeClass(curPage.$el, 'is-active');
                    addClass(newPage, 'is-active');

                   this.$refs.mtSwipe.index = index;
                  }
                  if (this.$refs.mtSwipe.isDone) {
                    this.$refs.mtSwipe.end();
                  }

                  if (prevPage) {
                    prevPage.$el.style.display = '';
                  }

                  if (nextPage) {
                    nextPage.$el.style.display = '';
                  }
                };



                 if(index>this.carIndex)
                {
                    var curPage = this.$refs.mtItem[this.carIndex];
                    var nextPage = this.$refs.mtItem[index];
                    var pageWidth= this.$refs.mtItem[0].$el.clientWidth;
                    if (nextPage) {
                        nextPage.$el.style.display = 'block';
                        this.$refs.mtSwipe.translate(nextPage.$el, pageWidth);
                    }
                    console.log(this.$refs.mtSwipe.isDone);
                    this.$refs.mtSwipe.isDone = true;
                    this.$refs.mtSwipe.before(curPage.$el);

                    this.$refs.mtSwipe.translate(curPage.$el, -pageWidth, 300, callback);
                    if (nextPage) {
                        var self =this;
                        var timer = setTimeout(function(){
                            self.$refs.mtSwipe.translate(nextPage.$el, 0, 300);  
                            clearTimeout(timer);
                        },50)

                    }
                }
                else if(index<this.carIndex)
                {
                    var curPage = this.$refs.mtItem[this.carIndex];
                    var prevPage = this.$refs.mtItem[index];
                    var pageWidth= this.$refs.mtItem[0].$el.clientWidth;

                    if (prevPage) {
                        prevPage.$el.style.display = 'block';
                        this.$refs.mtSwipe.translate(prevPage.$el, -pageWidth);
                    }

                    this.$refs.mtSwipe.isDone = true;
                    this.$refs.mtSwipe.before(curPage.$el);
                    this.$refs.mtSwipe.translate(curPage.$el, pageWidth, 300, callback);
                    if (prevPage) {
                      this.$refs.mtSwipe.translate(prevPage.$el, 0, 300);
                    }
                }
            },

本篇文章如對您有用請點選關注哦~，謝謝!