本期知晓程序依然以玩物志电商小程序为基础为大家带来有关于列表加载的实现教程。 为布局而生的 flex 传统的布局方式一般都是基于 div 盒子模型利用 float, position, display 来进行布局。 每个前端开发者对这些布局方式都非常熟悉。对一些特殊的布局来说使用这些属性并不方便由此还衍生出各种 hack 方案。直到 CSS3 提出了专为布局而生的解决方案就是 flex布局。 但是由于浏览器的兼容问题大多数开发者都不敢将 flex 布局直接应用到实际项目之中。在常规项目中大量应用 flex 布局还需要一个过程。 而对于 WeChat Only 的小程序来说则完全不用担心有浏览器兼容的问题它只要适配微信客户端即可。同时由于小程序的布局不会非常复杂所以也不用过多地担心大量使用 flex 引起的性能问题。 我们可以放心地在小程序中使用 flex 布局。 如何更方便地使用 rpx rpx 的全称是 responsive pixel它是小程序自己定义的一个尺寸单位可以根据当前设备的屏幕宽度进行自适应。 小程序中规定所有的设备屏幕宽度都为 750rpx根据设备屏幕实际宽度的不同1rpx 所代表的实际像素值也不一样。 例如在 iPhone 6 上屏幕实际宽度为 375px则 750rpx = 375px1rpx = 0.5px；而在 iPhone 5 上屏幕实际宽度为 320px则 750rpx = 320px1rpx = 0.42px。 其实我们并不必关心每种设备屏幕下 1rpx 到底代表多少个像素只要抓住 「所有的设备屏幕宽度都为 750rpx」这个原则就能很好地实现对任意设备屏幕大小的自适应布局。 知晓程序（微信号 zxcx0101）强烈建议设计人员用 iPhone 6 作为视觉稿的标准即将视觉稿总宽度设成 750px。这样开发者就能很方便地对相关的尺寸进行量取。 比如在总宽度为 750px 的 iPhone 6 视觉稿中量取一个图片的宽度为 200px那么这个图片的宽度即可设置为 200rpx。 简单一句话解释：量取多少就设置多少。 flex 配合 rpx 的使用案例 现在SEO排名服务这个图片的宽度即可设置为 200rpx。 简单一句话解释：量取多少就设置多少。 flex 配合 rpx 的使用案例 现在我们就在小程序中使用 flex 和 rpx 进行布局体验一下这种解决方案的便利。 案例一：货架列表 来看看货架列表的效果图： 首先还是贴两段代码。以下是 WXML 的实现：
然后 WXSS 的代码如下我们在关键代码处已经给出简要注释： 简单几步就完成了货架列表的布局并且完美兼容各种大小的设备屏幕。 案例二：货架分类标题 再来一个例子看一下商品列表货架分类的标题： 如上图所示货架标题居左「查看更多」的图标居右并且垂直居中。 代码结构如下： 有经验的同学一眼就可以看出要实现需求需要：
让 .shelf-title 向左浮动
让 .shelf-more 水平方向右对齐、垂直方向居中
最后还要给 .shelf-header clearfix 一下
那现在来看看 flex 是怎么做的： 只要区区几行代码就能轻松使用 flex 调整排版。 接下来结合上一期的内容发起一个请求获取数据然后 setData() 绑定数据： 货架列表就完成了。 template 模板的使用 我们再来看看首页的分类列表和货架分类列表页两个页面的对比： 不难发现SEO排名服务首页的分类列表和货架分类列表页两个页面的对比： 不难发现这两个页面的列表的样式是一模一样的。 那么我们就可以把每个商品视为一个模块暂且把这个商品模块称为 product-card我们可以将它用 template 封装起来在需要的地方就将它引入并进行调用。