如何在小程序内使用流式布局实现动态相册效果？

通过使用流式布局及数据表的查询事件实现按照特定分类查询相册内容

效果展示

具体步骤

1. 制作相册列表

2. 制作相册数据表

3. 添加查询相册数据事件

4. 制作相册详情页

5. 获取相册列表数据

6. 获取相册分类详情数据

7. 制作返回上一界面

步骤分解

1.制作相册列表

1.1. 拖拽 循环容器 到 根容器 中

1.2. 选中 循环容器

1.3. 点击 检查面板 的 样式

1.4. 配置 循环容器 样式

1.5. 选中 循环条目

1.6. 配置 循环条目 的 样式

1.7. 拖拽 图片组件 到 循环容器条目 中

1.8. 选中 图片组件

1.9. 铺满 循环容器条目

1.10. 拖拽 标签文本 到 图片组件

1.11. 选中 标签文本

1.12. 点击 检查面板 中的 样式

1.13. 配置样式

1.14. 拖拽 标签文本 到 根容器

1.15. 选中 标签文本

1.16. 配置 标签文本 的 样式

2.制作相册数据表

2.1. 点击 数据中心

2.2. 创建数据表

2.3. 补充数据表数据

3.添加查询相册数据事件

3.1. 点击 事件中心

3.2. 添加事件

4.制作相册详情页

4.1. 选中 图层

4.2. 点击加号新建界面

4.3. 拖拽 流式布局列表 到 根容器

4.4. 选中 流式布局列表

4.5. 配置样式

4.6. 拖拽 图片组件 到 流式布局列表条目

4.7. 选中 图片组件

4.8. 配置样式

4.9. 拖拽 标签文本 到 根容器 中

4.10. 选中 标签文本

4.11. 调整样式

5.获取相册列表数据

5.1. 点击 图层 中的 初始界面

5.2. 选中 循环容器

5.3. 点击 检查面板 中的 触发器

5.4. 创建 触发器

5.5. 选中 循环容器条目

5.6. 点击 检查面板 中的 数据绑定与设置

5.7. 配置数据

5.8. 选中 循环条目 中的 图片组件

5.9. 创建 触发器

6.获取相册分类详情数据

6.1. 选中 流式布局

6.2. 创建 触发器

6.3. 选中 流式布局条目

6.4. 配置数据

7.制作返回上一界面

7.1. 拖拽 图标 到 根容器

7.2. 选中 图标

7.3. 选择一个返回图标

7.4. 选中 图标

7.5. 创建 触发器

这样就可以在小程序中实现动态相册的效果了。