很多商城小程序中，一般的商品列表是以流式布局方式展示，下面为大家介绍小程序如何制作商品列表流式布局？

流式布局概念

流式布局也叫百分比布局
把元素的宽,高,margin,padding不再用固定数值,改用百分比,
这样元素的宽,高,margin,padding会根据页面的尺寸随时
调整已达到适应当前页面的目的.

先看效果：

如上图所示，为了能够看的更直观一点我给布局设置了红色虚线边框，整体页面根据元素的百分比进行布局。
直接看代码：

xxx.wxml

  
    
      
      
        
      
            
              {{item.name}}
            
            
              
￥{{item.newprice}}
  
              
￥{{item.oldprice}}
 
               
{{item.discount}}折
   
            
      
    
    
      
      
        
      
            
              {{item.name}}
            
            
              
￥{{item.newprice}}
  
              
￥{{item.oldprice}}
 
               
{{item.discount}}折
   
            
      
    
  

 
  
 

通过查看class标签发现有两个_item ，所以采取的是左右分别加载数据方式。

xxx.js

Page({

  data: {
    scrollH: 0,
    Width: 0,
    loadingCount: 0,
    images: [],
    col1: [],
    col2: []
  },

  onLoad: function () {
    wx.getSystemInfo({
      success: (res) => {
        let ww = res.windowWidth;
        let wh = res.windowHeight;
        let Width = ww * 0.48;
        let scrollH = wh;

        tShopfas.setData({
          scrollH: scrollH,
          Width: Width
        });

        //加载首组图片
        tShopfas.loadImages();
      }
    })
  },

  onImageLoad: function (e) {
    let imageId = e.currentTarget.id;
    let oImgW = e.detail.width;         //图片原始宽度
    let oImgH = e.detail.height;        //图片原始高度
    let Width = tShopfas.data.Width;  //图片设置的宽度
    let scale = Width / oImgW;        //比例计算
    let Height = oImgH * scale;      //自适应高度

    let images = tShopfas.data.images;
    let imageObj = null;

    for (let i = 0; i 

如下代码：

**if (col1.length 
col1.push(imageObj);

} else {

col2.push(imageObj);

}**

检索商品集合根据高度分别放入两个集合中。

xxx.wxss
page{  
  height: 100%;  
  background-color: #F3F4F6;
} 
/* 单个图片容器的样式 */
._item {
  width: 48.5%;
  margin: 2px;
  display: inline-block;
  vertical-align: top;
  background-color: #ffffff;
  font-size: 24rpx;

}
.item_info{
  border-top:1px dashed red;
}
.product-name{
  color: #000;
  /* height: 28px; */
  text-align:left;
   margin: 0px 5px; 
   margin-bottom: 5px; 
}
.product-price-wrap .product-price-new{
  color: #e80080;
  margin-left:5px;
  font-weight:900;
}
.product-price-wrap .product-price-old{
  color: #888;
  text-decoration: line-through;
  padding-left: 2px;
}
.product-price-wrap .discount{
  margin-left: 30px;
  background-color: #000;
  color: #fff;
}

Shopfa小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店