微信小程序开发设计流式布局处理计划方案
摘要： 在网上能找到的微信小程序流式布局处理计划方案，要不编码繁杂、逻辑性错乱，要不完成不上业务流程作用，因此济宁市卓一互联网的网编把新项目中的完成计划方案给大伙儿共享下...
在网上能找到的微信小程序流式布局处理计划方案，要不编码繁杂、逻辑性错乱，要不完成不上业务流程作用，因此济宁市卓一互联网的网编把新项目中的完成计划方案给大伙儿共享下。
非常简单的完成计划方案，不适感用有分页查询的情景。
这一计划方案简易的缘故是由于只是应用了css的特性。
应用column-count 特性能够特定网页页面显示信息的列数，一般流式布局全是2列，因此能够界定class
.list-masonry {
column-count: 2; //2列
column-gap: 20rpx; //列间隔
}
留意，流式布局的卡牌必须css特性 display: inline-block; 将卡牌设定为 内联原素。image 部件设定放缩方式 mode=widthFix 来维持照片宽高比。
column-count 特性默认设置是以列的方式来添充数据信息的。例如大家有20总数据，1 ~ 10 总数据展会示在左侧第一列，11 ~ 20 总数据展会示在第二列。
假如有分页查询，再往数字能量数组中提升20总数据后，便会变为 1 ~ 20 总数据会在左侧，21 ~ 40 总数据展会示在右侧。客户感受十分差。
因为 column-fill: balance; 添充特性失效，没法特定添充次序为行的方式。
因此这类完成计划方案只有一下载入完全部数据信息，不适感用以分页查询。
Component完成流式布局，作用强劲，拖动顺畅
根据自定部件，用自身的构思完成流式布局。随后在必须流式布局的地区立即启用，便捷重复使用。
沒有Demo!! 跟随我的流程一步一步来，就可以轻轻松松完成。
1.最先建立流式布局自定部件文档。
2.设计方案流式布局的wxml。
流式布局的构造简易，仅有上下2列。因此在设计方案UI的情况下，合理布局非常简单。
上下两侧，一边一个View。根据这2个View 来展现流式布局的多列。每一个View相匹配一数量据源，从而由此可见，这套构思的关键是这一2个数据信息源的解决。每一个View中的template 为流式布局中的卡牌，也不详细介绍了。
超出多列的流式布局较为罕见，这篇不考虑到，但能用这篇的构思来完成。
css款式
实际完成逻辑性
依据上边的 wxml 构造，这一部件的关键逻辑性便是怎样把要展现的数据信息item 放进leftList、rightList这2个数字能量数组中。
怎样分派数据信息item？这一简易，大家能够界定两个自变量 leftHight、rightHight，来各自纪录leftList、rightList数字能量数组中照片的高宽比（能够了解为左侧View、右侧View的高宽比，实际上仅仅照片的高宽比，但已考虑流式布局的的要求）。当leftHight 超过 rightHight时，把数据信息放进rightList，并让rightHight累加数据信息中照片的高宽比。当rightHight超过 leftHight 时，把数据信息放进leftList，并让leftHight 累加数据信息中照片的高宽比。
if (leftHight == rightHight) { //第一个item放左侧
leftList.push(tmp);
leftHight = leftHight + tmp.itemHeight;
} else if (leftHight rightHight) {
leftList.push(tmp);
leftHight = leftHight + tmp.itemHeight;
} else {
rightList.push(tmp);
rightHight = rightHight + tmp.itemHeight;
}
流式布局展现照片的情况下，必须了解照片的宽高，随后依据照片的宽高比来设定 image部件的宽高。因此假如大家的数据信息沒有宽高或宽高比，难以完成流式布局。尽管能够根据编码得到照片宽高，但会对特性及其客户感受有非常大危害，不强烈推荐那么做。能够和后台管理同学们商议下，看怎样再加宽高数据信息。
Component有自身性命周期时间方式，乃至能够象Page一样，作为一个独立的网页页面应用。能够在他的性命周期时间方式中得到到流式布局的总宽，及其照片的较大高宽比。
取得流式布局的总宽后，便可以依据照片的宽高比，测算出 image 部件的宽高。
在template中，image的宽高必须申明下。企业是px,并不是rpx
1.应用流式布局
a. 申请注册自定部件
在应用自定部件的Page的json文档中申明要应用的部件
{
....
usingComponents: {
waterFallView: ../../component/WaterFallView/WaterFallView
}
}
b. 在 wxml 中加上部件，并再加 id
