产品多图轮换海报实现分享。

smarter

我们在上架产品时经常会有到attachmentsimple组件上传多图，前端同一个产品有多图显示海报轮换，提供一个简单的海报轮换显示办法。1、页面新增一个data组件（imgData），字段storeFileName，realFileName（附件上传保存到数据库就是这两个字段）。
2、在页面接受产品事件modelParamsReceive中，把此产品的fImg字段（此字段是json字符串）加载到imgData.
3\、定义getImageUrl文件地址转换获取。
4、加载海报imgDataCustomRefresh，调用getImageUrl。
基本组件设置省略。


代码如下：

1.         Model.prototype.getImageUrl = function(storeFileName,realFileName,ownerID){
   
2.                  var operateType = "browse";
   
3.                  var url = '$UI/system/service/doc/common/simpleFileStore.j?realFileName=' + realFileName + '&storeFileName=' + storeFileName + '&ownerID=' + ownerID +  '&operateType=' + operateType;
   
4.                  return require.toUrl(url);
   
5.                 };
   
6.        
   
7.         //获取轮换图片
   
8.         Model.prototype.imgDataCustomRefresh = function(event){
   
9.                 var imgUrl = this.comp("imgData");
   
10.                 console.log(this.comp("imgData").toJson());
    
11.                 var productID = this.comp("productData").getCurrentRowID();
    
12.                 var me = this;
    
13.                 var carousel = this.comp("carousel1");
    
14.                  imgUrl.each(function(obj) {
    
15.                         var fImgUrl = obj.row.val("storeFileName");
    
16.                         var fUrl = obj.row.val("realFileName");
    
17.                         if (me.comp('contentsImg').getLength() > obj.index) {
    
18.                                 $(carousel.domNode).find("img").eq(obj.index).attr({
    
19.                                         "src" : fImgUrl,
    
20.                                         "pagename" : fUrl
    
21.                                 });
    
22.                                 if (obj.index == 0) {
    
23.                                         var fImgUrl1 = me.getImageUrl(fImgUrl,fUrl, productID);
    
24.                                         $(carousel.domNode).find("img").eq(0).attr({"src":fImgUrl1});
    
25.                                 }
    
26.                         } else {
    
27.                          var fImgUrl1 = me.getImageUrl(fImgUrl,fUrl, productID);
    
28.                          console.log(fImgUrl1);
    
29.                                 carousel.add('<img src="' + fImgUrl1 + '" class="tb-img1" bind-click="openPageClick" pagename="' + fUrl + '"/>');
    
30.                         }
    
31.                 });
    
32.         };
    
33.        
    
34.         //接收
    
35.         Model.prototype.modelParamsReceive = function(event){
    
36.                 /*
    
37.                 1、参数接收事件
    
38.                 2、根据参数从服务端过滤数据
    
39.                 */               
    
40.                 var product = this.comp("productData");
    
41.                 var listID = event.params.goodsID;
    
42.                 product.clear();
    
43.                 product.setFilter("filer1", "fProductID = '" + listID + "'");
    
44.                 product.refreshData();
    
45.                 var imgData = product.getValue("fImg");
    
46.                 var jsonObject=JSON.parse(imgData);
    
47.                 this.comp("imgData").loadData(jsonObject);               
    
48.                 this.imgDataCustomRefresh();
    
49.         };       

复制代码

负暄

顶，多谢分享！

lantianyu

组件设置是怎样的？

zhiqiu

无从下手，新手喜欢demo demo demo

郭德成

好好学习，天天向上

郭德成

不是太明白，很多地方省略了