如何使用 Towify 在小程序里实现一个广告轮播图?

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

在很多商业场景下,某些 Banner 位需要用到轮播图来展示广告,进而使界面的内容更加丰富,具有可互动性。下面就如何实现一个广告轮播图来进行具体操作。

效果展示:

如何使用 Towify 在小程序里实现一个广告轮播图?_轮播图

前置准备:

  • 三张商品图片
  • 商品介绍文本
  • 商品价格文本

具体步骤(5):

  • 添加 轮播图组件
  • 创建数据表
  • 创建 事件
  • 创建轮播图 触发器
  • 绑定数据

步骤分解:

添加轮播图组件

  • 添加 轮播图组件
  • 配置 轮播图组件 样式
  • 添加 图片文本组件

如何使用 Towify 在小程序里实现一个广告轮播图?_数据_02

如何使用 Towify 在小程序里实现一个广告轮播图?_数据_03

如何使用 Towify 在小程序里实现一个广告轮播图?_轮播图_04

创建数据表

  • 打开 数据中心
  • 创建 数据表
  • 数据表 中添加图片和文本

如何使用 Towify 在小程序里实现一个广告轮播图?_轮播图_05

如何使用 Towify 在小程序里实现一个广告轮播图?_轮播图_06

创建事件

  • 打开 事件中心
  • 创建查询 事件

如何使用 Towify 在小程序里实现一个广告轮播图?_轮播图_07

创建轮播图触发器

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

如何使用 Towify 在小程序里实现一个广告轮播图?_数据_08

绑定数据

  • 选中 轮播图条目
  • 点击 检查器 面板的 数据绑定及设置 图标
  • 绑定数据

如何使用 Towify 在小程序里实现一个广告轮播图?_触发器_09

这样就可以在小程序里实现一个广告轮播图了。


作者:TOWIFY
链接:https://juejin.cn/post/7156788462455586829
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6