热门搜索:软件下载

小组件的照片为什么不能轮换(如何使用轮播图在小程序内实现水平内容自动切换)

首页教程小组件的照片为什么不能轮换更新时间:2022-12-01 19:58:10

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

效果展示

小组件的照片为什么不能轮换,如何使用轮播图在小程序内实现水平内容自动切换(1)

前置准备:
  • 三张背景图片
具体步骤:
  • 添加一个轮播图组件
  • 添加一个图片
  • 添加一个标题
  • 添加数据表
  • 添加事件
  • 创建触发器
  • 绑定数据
步骤分解添加一个轮播图组件
  • 拖拽 轮播图 编辑区
  • 调整 轮播图 样式

小组件的照片为什么不能轮换,如何使用轮播图在小程序内实现水平内容自动切换(2)

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

小组件的照片为什么不能轮换,如何使用轮播图在小程序内实现水平内容自动切换(3)

添加一个标题
  • 拖拽 标签文本组件轮播图条目
  • 配置 标签文本组件 的样式

小组件的照片为什么不能轮换,如何使用轮播图在小程序内实现水平内容自动切换(4)

添加一个数据表
  • 点击 数据中心
  • 创建 数据表

小组件的照片为什么不能轮换,如何使用轮播图在小程序内实现水平内容自动切换(5)

  • 数据表 添加三条内容

小组件的照片为什么不能轮换,如何使用轮播图在小程序内实现水平内容自动切换(6)

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

小组件的照片为什么不能轮换,如何使用轮播图在小程序内实现水平内容自动切换(7)

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

小组件的照片为什么不能轮换,如何使用轮播图在小程序内实现水平内容自动切换(8)

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

小组件的照片为什么不能轮换,如何使用轮播图在小程序内实现水平内容自动切换(9)

这样就可以使用轮播图实现水平内容自动切换了。

本文转载自知乎:如何使用轮播图在小程序内实现水平内容自动切换? - TOWIFY的文章 - 知乎 https://zhuanlan.zhihu.com/p/574286022

,
软件推荐