wex5分享之----仿淘宝楼层展示(灵活布局)

在我研究仿淘宝过程中，发现panel是死的，无法根据接口传入的字段改变布局样式，而我却需要制作这样的功能。根据后台传入的数据，改变布局。当时首先想的是引入w文件，但是不行啊，引入的文件还是无法迭代出不一样的布局，然后又想了嵌套list布局，也是不行的。然后我老大就说直接使用js for循环出来。然后就有了今日的第二次分享，楼层分享。展示如下图：

额，样式什么的大家就不要太介意哈。这是通过一个静态json文件迭代出。

下面开始代码讲解：

1，首先在页面中拖拽出一个div，命名为floor_content(用于append出内容)

2，创建对应json文件，以下为部分json数据（shop_id,fshopID,后面点击事件中有作用）

3，创建对应模版函数

	function type_1(data){
		var goodsHtml = '
'
					+'
'
					   +''
					   +''+data.floor_name+''
					 +'
 '
					 +'
'
						+'
 ';
         					 var html_Li = '';
         						 for(var jj = 0;jj < data.goods.length; jj++){
        	  				var data1 = data.goods[jj];
        	  					html_Li += '
'
        		  				+'
 '
        		  					+''
        		  				+'
'
        		  		 	+'
';
          					}
            
         			goodsHtml +=  html_Li;
                     	
        goodsHtml +=  '
'; 
	$('[xid=floor_content]').append(goodsHtml);
	}

相信大家都能看懂上面代码把，在这就不做多的讲解了。

注：for循环中li加入了shopid,fshopid ,（其实为商品id和店铺id，额，测试的时候随意命名，这样不好，大家不要学。）

大家写入对应的模版函数即可，然后append到创建的xid为floor_content的div中，

4，加载数据。

在data接管刷新时加入判断

$.getJSON(url, function(data) {
			goodsData.loadData(data);
			var len = data.length;
			for(var ii = 0; ii < len; ii++){
				if(data[ii].style == "1"){
					type_1(data[ii]);
				}else if(....){
					.....
				}
			}
			
		});

对应if else if 中对应函数即可。到此，灵活的楼层就出来了。（这暂为修改版一，代码比较冗余，后续会做出代码精简。）

5，最后，点击事件，跳转到商品详情页

$('body').on('click','.goods_li',function(){
		var shop_id = $(this).attr("floor_id");
		var fShopID = $(this).attr("fShopID");

		justep.Shell.showPage("$UI/app/detail.w", {
			goodsID : shop_id,
			shopID : fShopID
		});
	});

showpage中引入为绝对路径，相对路径不行的。

传入商品id，店铺id，即可跳转到detail.w页面。

最后说一句，需引入到main.w中，由index.w打开则不会出来新开页面跳转。

谢谢大家!