如何制作一个开屏引导轮播图?

本文详细介绍了如何在微信小程序中创建开屏引导轮播图,包括效果展示、前置准备、具体步骤和步骤分解。首先,需要准备开屏图片和文案。接着,依次配置轮播图组件、数据中心、事件中心、轮播图触发器、条目数据以及轮播点,通过数据绑定和事件处理实现轮播图的动态展示。

效果展示:

155ce17253d9655895fed49734b8495d.jpeg

前置准备:

  • 三张开屏图片素材
  • 相对应的文案


具体步骤:

  • 添加配置轮播图基础组件
  • 添加配置数据中心和事件中心
  • 添加配置轮播图触发器
  • 添加配置轮播图条目数据
  • 配置轮播点


步骤分解:

添加配置轮播图基础组件

  • 添加 轮播图 组件
  • 配置 尺寸设置
  • 添加需要数量的 标签文本 组件
  • 添加需要数量的 图片 组件

c3c391bcbdaea8a21f5b1aa77f07a425.jpeg5764ab0bf44e6d3ff46d4441d66f755b.jpeg

添加配置数据中心和事件中心

  • 点击上方创建 数据中心
  • 配置 数据中心 数据
  • 填充准备好的文案和图片素材
  • 点击上方创建 事件中心
  • 添加 数据事件
  • 配置 事件中心-数据事件 数据

331bfe4d54f76e9d0ba2f220e0219910.jpeg86573220fc82220041d0858a11d2012a.jpeg8c727fc54c3431bae83025a7a5ded1eb.jpeg3b9f98c2caa3ae9a7768d3d96a7156ba.jpeg

添加配置轮播图触发器

  • 图层中选择 轮播图 组件
  • 点击添加 触发器 配置相关数据
  • 点击 数据绑定及设置 配置相关数据

741e75cc97ff7a7915da777c819327d4.jpeg944fc00d442fffa7af938a12005763b6.jpeg

添加配置轮播图条目数据

  • 图层中选择 轮播图条目(list item) 组件
  • 点击添加 数据绑定及设置 配置相关数据

16b51209100377cdec13c6387deb1ca6.jpeg

配置轮播点

  • 图层中选择 轮播点(Dot) 组件
  • 配置 样式设置 相关数据

c959914024ec85baef817d4ab0a6b609.jpeg

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值