写点什么

如何使用轮播图在小程序内实现水平内容自动切换?

作者:Towify
  • 2022-12-21
    北京
  • 本文字数:284 字

    阅读完需:约 1 分钟

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

前置准备:

  • 三张背景图片

具体步骤:

  • 添加一个轮播图组件

  • 添加一个图片

  • 添加一个标题

  • 添加数据表

  • 添加事件

  • 创建触发器

  • 绑定数据

步骤分解

添加一个轮播图组件

  • 拖拽 轮播图编辑区

  • 调整 轮播图 样式



添加一个图片

  • 拖拽一个 图片组件轮播图条目

  • 图片组件 铺满 父级容器



添加一个标题

  • 拖拽 标签文本组件轮播图条目

  • 配置 标签文本组件 的样式



添加一个数据表

  • 点击 数据中心

  • 创建 数据表



  • 数据表 添加三条内容

添加事件

  • 点击 事件中心

  • 配置 查询 事件



创建触发器

  • 选中 轮播图

  • 点击 检查器 面板中的 触发器

  • 配置 触发器



绑定数据

  • 选中 列表条目

  • 点击 检查器 面板中的 数据绑定与设置

  • 绑定数据



用户头像

Towify

关注

还未添加个人签名 2022-11-02 加入

还未添加个人简介

评论

发布
暂无评论
如何使用轮播图在小程序内实现水平内容自动切换?_小程序_Towify_InfoQ写作社区