mint-ui 自身提供了前一页，后一页的function,这里由于项目需求,点击任意tab都需要跳转到相应的图片,所以自己封装了一个function:switchCar。

查看项目请到FullStack-Product-Transport-User

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为 mint-ui提供的前一页的事件
back为 mint-ui提供的后一页的事件
mt-swipe 、mt-swipe-item为 mint-ui 提供的轮播图组件

<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

import { addClass, removeClass } from 'mint-ui/src/utils/dom';

			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);
		            }
				}
			},

如果觉得我的文章对你有帮助,欢迎关注我的blog

相关知识点

【Javascript】深入理解async/await的实现,Generator+Promise = Async/Await
【Javascript】深入理解this作用域问题以及new运算符对this作用域的影响
【Javascript】手写运算符new创建实例并实现js继承