头图

通过轮播图实现一个水平内容自动切换。

效果展示

image.png

前置准备:

  • 三张背景图片

具体步骤:

  • 添加一个轮播图组件
  • 添加一个图片
  • 添加一个标题
  • 添加数据表
  • 添加事件
  • 创建触发器
  • 绑定数据

步骤分解

添加一个轮播图组件

  • 拖拽 轮播图编辑区
  • 调整 轮播图 样式

image.png

添加一个图片

  • 拖拽一个 图片组件轮播图条目
  • 图片组件 铺满 父级容器

image.png

添加一个标题

  • 拖拽 标签文本组件轮播图条目
  • 配置 标签文本组件 的样式

image.png

添加一个数据表

  • 点击 数据中心
  • 创建 数据表

image.png

  • 数据表 添加三条内容

添加事件

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

image.png

创建触发器

  • 选中 轮播图
  • 点击 检查器 面板中的 触发器
  • 配置 触发器

image.png

绑定数据

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

image.png

这样就可以使用轮播图实现水平内容自动切换了。
官网链接:https://www.towify.com/#/


Towify
1 声望1 粉丝