mui + vue轮播图处理

html代码

<div id="slider" class="mui-slider">
		<div class="mui-slider-group mui-slider-loop">
			<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播图片) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<img :src="beforebannertop" alt="" width="100%" height="148px">
			</div>
			<!-- 此处用v-for循环,动态添加图片数据-->
			<div class="mui-slider-item" v-for="item in mallHomeCarousel">
		    	<img :src="item.banner" alt="" width="100%" height="148px"/>
		  	</div>
			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播图片) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<img :src="lastbannertop" alt="" width="100%" height="148px">
			</div>
		</div>
		<div class="mui-slider-indicator">
			<!-- 图片对应的圆点，第一个默认存在，后面的用v-for渲染 -->
			<div class="mui-indicator mui-active" style="margin:1px 5px 1px 0;"></div>
			<div v-for="item in CarouselClass" :class="item._class" style="z-index: 100;"></div>
		</div>
	</div>

js部分

//这部分是vue的data数据，用于渲染dom
data: {
  	mallHomeCarousel:[
		//{
  		//	banner:'./images/homeBackImg.png'
  		//},
  		//{
  		//	banner:'./images/advert1.png'
  		//},
  		//{
  		//	banner:'./images/advert2.png'
  		//}
  	],
	CarouselClass:[
		//{
		//	_class:'mui-indicator'
		//},
		//{
		//	_class:'mui-indicator'
		//}
	],
	beforebannertop:'./images/advert2.png',//第一张轮播图
	lastbannertop:'./images/homeBackImg.png'//最后一张轮播图
}

//获取轮播图并且渲染到dom中去
function getbannertop(){
	var getUrl = my_url + 'api/com/index_banner';
	var data = {
		type:1    //根据个人情况传参
	}
	postDate(getUrl,data,'POST',function(data){//此处调用自己封装的ajax
		if(data.code == 200){
			var res = data.data;
			this_obj.lastbannertop = res[0].logo;  //this_obj指向的是当前vue对象，我这里把它定义为全局变量
			for(var i in res){
				this_obj.mallHomeCarousel.push({
					banner:res[i].logo,
					_thisclass:"mui-slider-item"
				})
				if(i == res.length-1){
					this_obj.beforebannertop = res[i].logo;
					//最后一个图的时候
					for(var k in res){
						if(k == 0){
						}else{
							this_obj.CarouselClass.push({
								_class:'mui-indicator'
							})
						}
					}
				}
			}
		}
	})
}


/******ajax封装******/
function postDate(path,data,type,callback){
    $.ajax({
	    type: type,
	    url:path,
	    data:data,
	    dataType: 'json',
	    success:function(data){
	    	console.log('成功     :   '+path);//JSON.parse(str
//	    	console.log('内容     :   '+JSON.stringify(data));
	        callback(data);
	    },
	    error:function(xhr, type) {
			console.log(typeof(xhr.responseText));
			console.log('失败     :   '+path);
	        mui.toast('链接错误');
	    }
	});
}