活字格10.0 update1新功能解密：十八丶图文列表支持宫格模式

隔壁老王

本帖最后由 Grayson.Shang 于 2024-8-23 15:55 编辑

图文列表在活字格的应用开发中，应该算是仅次于活字格表格的元老级角色了（个人发言，不同意欢迎PK）。

活字格应用设计中，表格在应用开发中起着举足轻重的作用，但表格不是万能的，尤其是一些自定义的UI，表格就很难做到普适性，而图文列表就是列表数据的第二方案。

当然，图文列表除了表格的展示以外，还可以做到流动式的页面布局，这个就是表格所做不到的。举一个简单的例子，想要做一个类似于商城的例子，相信大家应该第一个想到的就是图文列表了吧（应该不会有人想使用表格实现吧）
image.png813921813.png

在之前的版本中，图文列表设计商城这种样式的，页面，受限于不同浏览器的分辨率不同，导致想要达成一个适用于各种分辨率的屏幕，就会出现这样的现象，当我们图文列表整体宽度，达不到图文列表模板的整数倍，那么就会出现空白余留，这种的空白给客户的体验并不好。
image.png91694335.png

一般我们解决的方案就是，图文列表宽度不再设置成自适应，而是保持固定宽度，且固定宽度可以正常展示图文列表模板的整数倍。葡萄城市场就是这样设计的。
image.png834617309.png

这样做，也有会出现问题，当在分辨率比较小的客户端访问的时候，就会出现滚动条

image.png653584594.png

那在10.0 update1中，这个问题是可以得到解决的。

基本使用
1、我们先来了解一下这个功能的基本使用，在图文列表中，我们将排列模式设置为“宫格”，然后在列数这里设置一个固定的值，那么我们将可以得到一个被均分为5列的图文列表
image.png943502807.png

2、在这种均分的情况下，会存在一些问题，我们先了解一下

若是图文列表模板的宽度 < 图文列表均分后的模板宽度，如下，图文列表的内容就会被居中显示，然后左右两次会被空白页面补充

若是图文列表模板的宽度 > 图文列表均分后的模板宽度，如下，图文列表就会出现覆盖，甚至中间的图文列表之间的空白区域都会被覆盖

当且仅当图文列表模板的宽度 = 图文列表均分后的模板宽度，才可以达成预期的展示效果

3、那么大家就会想，这个功能是不是有些鸡肋呢？

首先得要自己先算出图文列表均分的宽度，然后再根据宽度调整图文列表宽度，才可以做到类似的效果，而且展示的列数还不能随意修改，若是随意修改，就需要重新设计。

那么，接下来这个图文列表宫格设计小技巧，就会提升这种设计的效率，让你不再头疼。那就是图文列表的模板中加入范围模式。

活字格页面，分为多种展示模式，我们常见的有“固定模式+范围模式”、“固定模式+自适应模式+范围模式”、“自适应模式+范围模式”等等。
推荐图文列表的模板设计——“固定模式 + 范围模式”。

固定模式，保证了，图文列表宽度的最小展示宽度，小于这个宽度图文列表的内容已经不能正常展示了，一般需要设计成小于图文列表均分后的宽度
范围模式，可以保证无论图文列表宽度如何变换，模板都可以自动跟随变换

进阶用法：
基础用法保证了可以在指定列数的情况下，做到图文列表的正常展示，那么进阶用法，带给大家动态列数的教程，具体效果如下图
图文列表动态宫格设置动态列数.gif780023498.png

可以看到上面的动画，图文列表的整体宽度随着浏览器的宽度变换而变化，而图文列表每行模板的数量也随着图文列表的宽度变化一起跟着改变。

说说设计的思路：
1、计算图文列表有多宽。这个方案中，图文列表在页面占比是很大的，所以计算图文列表的列宽并不复杂。
计算公式：浏览器的宽度-图文列表以外的宽度
我们有一个关键字，是获取浏览器宽度，
image.png489682311.png