天天看点

如何使用流式布局实现动态相册

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

效果展示

如何使用流式布局实现动态相册

具体步骤

  • ​制作相册列表
  • 制作相册数据表
  • 添加查询相册数据事件
  • 制作相册详情页
  • 获取相册列表数据
  • 获取相册分类详情数据
  • 制作返回上一界面​

步骤分解

  • ​制作相册列表
  • 拖拽 循环容器 到 根容器 中
  • 选中 循环容器
  • 点击 检查面板 的 样式
  • 配置 循环容器 样式​
如何使用流式布局实现动态相册
  • 选中 循环条目
  • 配置 循环条目 的 样式
  • 拖拽 图片组件 到 循环容器条目 中
  • 选中 图片组件
  • 铺满 循环容器条目
如何使用流式布局实现动态相册
  • 拽 标签文本 到 图片组件
  • 选中 标签文本
  • 点击 检查面板 中的 样式
  • 配置样式
如何使用流式布局实现动态相册
  • 拖拽 标签文本 到 根容器
  • 选中 标签文本
  • 配置 标签文本 的 样式
  • 制作相册数据表
  • 点击 数据中心
  • 创建数据表
  • 补充数据表数据
如何使用流式布局实现动态相册
如何使用流式布局实现动态相册
  • 添加查询相册数据事件
  • 点击 事件中心
  • 添加事件
如何使用流式布局实现动态相册
如何使用流式布局实现动态相册
  • 制作相册详情页
  • 选中 图层
  • 点击加号新建界面
如何使用流式布局实现动态相册
  • 拖拽 流式布局列表 到 根容器
  • 选中 流式布局列表
  • 配置样式
  • 拖拽 图片组件 到 流式布局列表条目
  • 选中 图片组件
  • 配置样式
如何使用流式布局实现动态相册
  • 拖拽 标签文本 到 根容器 中
  • 选中 标签文本
  • 调整样式
如何使用流式布局实现动态相册
  • 获取相册列表数据
  • 点击 图层 中的 初始界面
  • 选中 循环容器
  • 点击 检查面板 中的 触发器
  • 创建 触发器
如何使用流式布局实现动态相册
  • 选中 循环容器条目
  • 点击 检查面板 中的 数据绑定与设置
  • 配置数据
如何使用流式布局实现动态相册
  • 选中 循环条目 中的 图片组件
  • 创建 触发器
如何使用流式布局实现动态相册
  • 获取相册分类详情数据
  • 选中 流式布局
  • 创建 触发器
如何使用流式布局实现动态相册
  • 选中 流式布局条目
  • 配置数据
  • 制作返回上一界面
  • 拖拽 图标 到 根容器
  • 选中 图标
  • 选择一个返回图标
  • 选中 图标
  • 创建 触发器