不规则布局批量显示图片

lwzlwzgood

你好，请问怎么能做到不规则地批量显示图片，布局形式就像改图中的长方体布局方式，list能实现这功能么？还是list只能由上往下一条一条的排列下来？要是不行，wex5有没有替他办法的

cgrddv

你好楼主，list的布局样式你可以参考教学视频的多列列表的布局。在wex5中是可以使用bootstrap的栅格化布局的哟

luchuqi

list有个class是card选上之后，在li上加bootstrap的删格样式就行

lwzlwzgood

cgrddv 发表于 2016-8-5 11:56
你好楼主，list的布局样式你可以参考教学视频的多列列表的布局。在wex5中是可以使用bootstrap的栅格化布局 ...

多列布局自己把li改为div布局解决了，图片轮播官方的例子都是本地图片来的，不用加list组件也能显示，要是改为服务器图片链接，加个list就会出现很多个carousel，不会在一个轮播里面播放图片了

cgrddv

lwzlwzgood 发表于 2016-8-5 15:04
多列布局自己把li改为div布局解决了，图片轮播官方的例子都是本地图片来的，不用加list组件也能显示，要 ...

可以看一下这个帖子，需要使用add方法来动态添加img：http://bbs.wex5.com/forum.php?mo ... ypeid%26typeid%3D87

lwzlwzgood

cgrddv 发表于 2016-8-5 15:08
可以看一下这个帖子，需要使用add方法来动态添加img：http://bbs.wex5.com/forum.php?mod=viewthread&tid ...

你好，这个例子我懂，可是跟我的例子不太一样，我要链接的图片是用attachmentsimple上传的，更换url得重拼一次路径，怎么把重拼的路径放到新增图片的代码里尼

cgrddv

lwzlwzgood 发表于 2016-8-5 15:58
你好，这个例子我懂，可是跟我的例子不太一样，我要链接的图片是用attachmentsimple上传的，更换url得重 ...

你可以看一下这个图片的路径转换，转换后的路径直接设过去：http://docs.wex5.com/wex5-ui-question-list-2022/

lwzlwzgood

cgrddv 发表于 2016-8-5 16:16
你可以看一下这个图片的路径转换，转换后的路径直接设过去：http://docs.wex5.com/wex5-ui-question-list ...

你好，轮播的问题我参考这个帖子解决了，写的挺好   http://bbs.wex5.com/forum.php?mo ... ;highlight=carousel

不过还有个问题，浏览器观看的时候打开f12调试，轮播很正常，关掉f12后就不会播第二张图片了，用鼠标点击也不会转换是什么原因

lwzlwzgood

你好，我做的图片轮播中可以自动播放，可是有两个问题没弄好：1.播放的图片跟轮播控制条中的圆点顺序不对应，第一个圆点里面没有图片，第二个圆点对的是第一张图片，最后一张图片没有圆点对应
2.点击圆点没有事件发生，不会换图
源码部分：

1.   <div style="height:250px;border-radius:10px 10px 10px 10px;" xid="div4" class="x-list  col-xs-4 col-sm-4">
   
2.    <div component="$UI/system/components/bootstrap/carousel/carousel" class="x-carousel " xid="carousel2" auto="true" interval="10" style="border-radius:10px;">
   
3.     <ol class="carousel-indicators" xid="ol2" style="position:absolute;bottom:0px;top:230px;left:284px;"></ol>
   
4.      
   
5.     <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="contentsImg" style="border-radius:10px" onActiveChanged="contentsImgActiveChanged">
   
6.      <a xid="a8" class="carousel-control" style="border-radius:0px 0px 10px 10px;bottom:0px;background-color:#C2A30E;width:100%;height:10%;top:225px;"></a></div><a class="left carousel-control" role="button" xid="a3" bind-visible="false" style="border-radius:10px 0px 0px 10px;">
   
7.      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" xid="span22"></span>
   
8.      <span class="sr-only" xid="span23">Previous</span></a>
   
9.     <a class="right carousel-control" role="button" xid="a4" bind-visible="false" style="border-radius:0px 10px 10px 0px;">
   
10.      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" xid="span24"></span>
    
11.      <span class="sr-only" xid="span25">Next</span></a>
    
12.     <a xid="a6" class="carousel-control" style="font-family:黑体;font-size:medium;top:inherit;left:inherit;">更多</a>
    
13.     </div>
    
14.   <div component="$UI/system/components/justep/list/list" class="x-list pull-left center-block carousel-control" xid="list2" data="leaftitledata" style="border-radius:10px 10px 0px 0px;top:0px;height:30px;background-color:#DEDEDE;left:inherit;width:93%;" autoLoad="true">
    
15.    <ul class="x-list-template x-min-height" xid="listTemplateUl3" componentname="$UI/system/components/justep/list/list#listTemplateUl" id="undefined_listTemplateUl3">
    
16.     <li xid="li2" class="x-min-height" componentname="li(html)" id="undefined_li2"><div component="$UI/system/components/justep/output/output" class="x-output pull-left" xid="output1" bind-ref='ref("fName")' style="border-radius:10px 10px 0px 0px;"></div></li></ul> </div>
    
17.   </div>

复制代码

js代码：

1.         Model.prototype.leafdataCustomRefresh = function(event){
   
2.         var leafdata = this.comp("leafdata");
   
3.         console.log(this.comp("leafdata").toJson());
   
4.         var self = this;
   
5.         var carousel = this.comp("carousel2");
   
6.         leafdata.each(function(obj) {
   
7.                        var ficon = obj.row.val("fIcon");
   
8.                        var fid = obj.row.val("fID");
   
9.                        var fname = obj.row.val("fName");
   
10.                      if (self.comp('contentsImg').getLength() > obj.index) {
    
11.                            var fviconUrl = self.getviconUrl(ficon, fid);
    
12.                                 $(carousel.domNode).find("img").eq(obj.index).attr({"src" : fviconUrl});      
    
13.                                                                if (obj.index === 0) {
    
14.                                        var fviconUrl = self.getviconUrl(ficon, fid);
    
15.                                        $(carousel.domNode).find("img").eq(0).attr({"src":fviconUrl});
    
16.                               }                           
    
17.                        } else {
    
18.                          var fviconUrl = self.getviconUrl(ficon, fid);
    
19.                         console.log(fviconUrl);
    
20.                                carousel.add('<img src="' + fviconUrl + '" name="'+obj.index+'" class="image-wall" height="250px" style="width:100%;border-radius:10px 10px 10px 10px;" bind-click="openPageClick"/>');                           
    
21.                         }
    
22.                 });
    
23.                      
    
24.         };

复制代码