attachment组件上传的图片默认是一个一个点击的时候显示原图查看,如果要用轮播的方式默认就实现所有的原图,可以参考如下:
本例展现了data中一条记录中attachment组件上传的图片
1.在.w中需要展现轮播的区域放carousel组件,需要注意的是把组件中contents下默认生成的content删除
<div component="$UI/system/components/bootstrap/carousel/carousel" class="x-carousel" xid="carousel1" auto="false" style="height:300px;width:300px;"> <ol class="carousel-indicators" xid="ol1"/> <div class="x-contents carousel-inner" role="listbox" component="$UI/system/components/justep/contents/contents" active="0" slidable="true" wrap="true" swipe="true" routable="false" xid="contents1" style="height:300px;"></div> </div>
2.js中获取到数据,进行处理给轮播组件显示
var data = this.comp("bizData1"); var carousel = this.comp("carousel1"); var sphoto = data.getValue("fFJ2");//获取attachment关联的关系的值 if (sphoto != null && sphoto != "" && sphoto != "[]") {//判断关系有值时获取图片用carousel展现 var imageJson = eval("(" + sphoto + ")"); if (imageJson.length > 0) { for (var i = 0; i < imageJson.length; i++) {//遍历关系的json数据,有几个图片就carousel就调用几次add展现图片 var fileID = imageJson[i]["fileID"]; var docPath = imageJson[i]["docPath"]; var url = DocUtils.InnerUtils.getdocServerAction({ "docPath" : docPath, urlPattern : "/repository/file/view/" + fileID + "/last/content", isFormAction : false, context : this.getContext() });//获取图片url carousel.add('<img src="' + url + '" class="tb-img1"/>');// } } this.comp("contents1").to(0);//设置默认定位到第一个图片 }
评一波