通过循环容器及数据表功能,制作一个发送评论实时显示的功能

效果展示

如何制作一个实时在线显示评论?_输入框

具体步骤

  • 制作评论背景
  • 制作评论样式
  • 制作一个发送评论输入框
  • 制作一个发送按钮
  • 创建评论数据表
  • 添加获取评论事件
  • 创建发送评论触发器
  • 数据绑定与设置

步骤分解

制作评论背景

  • 拖拽 循环容器 到 编辑区
  • 点击 循环容器 图层
  • 点击 检查面板 中的 样式
  • 配置 循环容器 的 样式
  • 选中 列表循环条目
  • 点击 检查面板 中的 样式
  • 调整 列表循环条目 的 样式

如何制作一个实时在线显示评论?_无代码_02

如何制作一个实时在线显示评论?_无代码_03

制作评论样式

  • 拖拽 标签文本 到 列表循环条目 中
  • 点击 检查面板 中的 样式
  • 配置 标签文本 的 样式

如何制作一个实时在线显示评论?_触发器_04

制作一个发送评论输入框

  • 拖拽 输入框组件 到 Root Container
  • 选中 输入框组件
  • 点击 检查面板 中的 数据绑定与设置
  • 填写 占位符
  • 点击 检查面板 中的 样式
  • 配置 输入框组件 样式

如何制作一个实时在线显示评论?_触发器_05

如何制作一个实时在线显示评论?_微信小程序_06

制作一个发送按钮

  • 拖拽 按钮 到 Root Container
  • 选中 按钮
  • 点击 检查面板 中的 数据绑定与设置
  • 填写 自定义内容
  • 点击 检查面板 中的 样式
  • 配置 按钮 样式

如何制作一个实时在线显示评论?_微信小程序_07

如何制作一个实时在线显示评论?_无代码_08

创建评论数据表

  • 点击 数据中心
  • 创建 数据表
  • 添加评论表数据

如何制作一个实时在线显示评论?_无代码_09

如何制作一个实时在线显示评论?_微信小程序_10

添加获取评论事件

  • 点击 事件中心
  • 配置 事件

如何制作一个实时在线显示评论?_输入框_11

如何制作一个实时在线显示评论?_数据绑定_12

创建发送评论触发器

  • 选中 “发送” 按钮
  • 点击 检查面板 中的 触发器
  • 配置 触发器

如何制作一个实时在线显示评论?_微信小程序_13

如何制作一个实时在线显示评论?_数据绑定_14

数据绑定与设置

  • 选中 列表循环条目
  • 点击 检查面板 中的 数据绑定与设置
  • 配置数据

如何制作一个实时在线显示评论?_输入框_15

这样就可以实现实时在线显示评论了。