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

效果展示

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(1)

具体步骤

1.制作相册列表

2.制作相册数据表

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

4.制作相册详情页

5.获取相册列表数据

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

7.制作返回上一界面

步骤分解1.制作相册列表

1.1. 拖拽 循环容器 根容器

1.2. 选中 循环容器

1.3. 点击 检查面板 的 样式

1.4. 配置 循环容器 样式

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(2)

1.5. 选中 循环条目

1.6. 配置 循环条目样式

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(3)

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

1.8. 选中 图片组件

1.9. 铺满 循环容器条目

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(4)

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

1.11. 选中 标签文本

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

1.13. 配置样式

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(5)

1.14. 拖拽 标签文本 根容器

1.15. 选中 标签文本

1.16. 配置 标签文本样式

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(6)

2.制作相册数据表

2.1. 点击 数据中心

2.2. 创建数据表

2.3. 补充数据表数据

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(7)

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(8)

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

3.1. 点击 事件中心

3.2. 添加事件

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(9)

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(10)

4.制作相册详情页

4.1. 选中 图层

4.2. 点击加号新建界面

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(11)

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

4.4. 选中 流式布局列表

4.5. 配置样式

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

4.7. 选中 图片组件

4.8. 配置样式

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(12)

4.9. 拖拽 标签文本根容器

4.10. 选中 标签文本

4.11. 调整样式

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(13)

5.获取相册列表数据

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

5.2. 选中 循环容器

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

5.4. 创建 触发器

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(14)

5.5. 选中 循环容器条目

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

5.7. 配置数据

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(15)

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

5.9. 创建 触发器

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(16)

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

6.1. 选中 流式布局

6.2. 创建 触发器

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(17)

6.3. 选中 流式布局条目

6.4. 配置数据

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(18)

7.制作返回上一界面

7.1. 拖拽 图标 根容器

7.2. 选中 图标

7.3. 选择一个返回图标

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(19)

7.4. 选中 图标

7.5. 创建 触发器

小程序里面的元素怎样写进去(如何在小程序中使用流式布局实现动态相册的效果)(20)

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

本文转载自知乎:在小程序中如何使用流式布局实现动态相册的效果? - TOWIFY的文章 - 知乎 https://zhuanlan.zhihu.com/p/584167431

,