首页 > 编程语言 >如何使用 Towify 在小程序里实现一个广告轮播图?

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

时间:2023-01-12 10:35:28浏览次数:37  
标签:触发器 轮播 创建 绑定 数据表 Towify 广告 组件

在很多商业场景下,某些 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
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:触发器,轮播,创建,绑定,数据表,Towify,广告,组件
From: https://blog.51cto.com/u_15860117/6003650

相关文章

  • 合约广告平台架构演进实践
    导读introduction从事B端业务系统研发多年,不免会有这样的思考:B端系统的技术挑战是什么?什么样的业务架构算好架构?本文结合百度合约广告业务的发展历程,介绍广告投放平台从......
  • Axure 创建轮播图
    拖一个动态面板,设置名称双击动态面板,添加3个状态给3个状态,分别添加3张图片设置交互新建交互->载入时->设置面板状态双击进去,界面看得直观些下一项、向后循......
  • swiper4 轮播(心形)
    <linkrel="stylesheet"href="__CDN__/assets/static/css/swiper4.min.css"><divid="certify"class="certifymarginB_20w_1200"><divclass="swiper-container......
  • 如何使用 Towify 在小程序中创建关联表?
    前置准备:一张需要被关联的表格具体步骤(5):添加关联字段选择被关联表双击关联字段格选择被关联数据关联成功步骤分解:添加关联字段选择被关联表双击关联字段格选择被关联数......
  • JQRoll,一款全屏轮播图网站主页插件,可用于制作炫酷的主页、引导页
    JQRoll介绍JQRoll是仿朝夕光年官网开发的一款全屏轮播图网站主页插件,在此基础上,增加了网页加载动画,Web端增加了自动滚动功能,解决了移动端两侧黑条的问题。插件使用简单,可......
  • 平面广告创意方法有哪些?-优漫动游
      平面广告创意方法有哪些?平面广告的创意是指广告中传达信息的手法和形式。广告创意的基本要求是通过创造新颖、独特的视觉效果来吸引人们的注意力。而传播目的则是通过......
  • 无广告速度快,性能稳定,这才是合格的浏览器
    每个人都有自己心中灿烂的烟火,同时也有自己习惯使用的浏览器。但是,你用的浏览器真的是一款合格的浏览器吗?没错,今天又想给大家分享好用的浏览器了,都是无广告、速度快、性能......
  • React 用axios 获取遍历json 引入swiper轮播图
    结构展示:功能展示:1.使用swiper轮播插件,2.自动轮播,当前图片高亮小按钮首先引入swiper和配置环境1.npminstall--saveswiper2.在src文件夹index.js下引入样式,避免打包失败im......
  • 【积跬步以至千里】关于文化自信与支持国产的个人理解,附加WPS关闭广告或消息推送
    一、文化自信临近考研,本来打算考完再发这个博客的,但是突然看新闻看到很多事,有感触,所以还是发了。可能这篇博客的开头有些愤青,如果大家不太喜欢,还请忽略,只是想表达一些个人情......
  • js/css实现图片轮播
    实现样式:tplb.cssul,li{padding:0;margin:0;list-style:none;}.adver{margin:0auto;width:700px;overflow:hidden;h......