ivx页面(3)轮播图的动态数据绑定实现以及轮播图点击跳转页面

简介: ivx页面(3)轮播图的动态数据绑定实现以及轮播图点击跳转页面

1.如何创建轮播图组件

点击前台——》点击扩展组件——》点击特殊功能容器——》轮播页容器

创建之后会给你自动添加2个轮播页面,如果你着急实现你可以多创建几个这个轮播页然后在给每一个轮播页上的背景图进行上传图片(这是写死数据)

2.活数据渲染

删除只留下一个轮播页,然后点击轮播页容器创建一个for循环,并且将轮播页拖入for循环中

然后创建一个数据组件存放数据,然后点击for循环组件绑定数据来源于数据组件,轮播页的背景在选择for循环组件的数据(注意记得要在轮播页的背景图那里点击一下右边的框才可以进行选择数据)

3.轮播图超链接,点击轮播图之后跳转页面

点击选择轮播页给其添加一个点击事件,然后就可以设置你想要跳转的页面从而实现点击轮播图之后跳转页面

4.实现只点击第一张轮播图的图片才能跳转超链接或者说给每一个轮播页加上不同的超链接

在点击轮播页跳转页面的点击加一个条件就当前序号1=0(当前序号是直接点击条件的下拉框就可以选择这个选项不用自己敲出来),就是按照数组的逻辑从0下标开始,0就是第一张图片,1就是第二张图片,这样子就可以给轮播页的每一张图片设置对应的跳转

 

 

相关文章
|
3月前
|
人工智能 Java API
Java Spring Boot 拥抱 AI 原生:从 API 调用到架构重构的进化之路
在AI时代,Java开发者需突破调用API的表层应用,以Spring Boot为基石,推动从“菜单驱动”到“意图驱动”的范式变革。通过构建智能体为核心、工具化封装Service、强化记忆与安全管控的四层架构,融合RAG、异步调度与全链路监控,实现AI原生应用的工程化落地。依托Spring生态的稳定性与可管理性,逐步演进现有系统,让Java在AI原生时代焕发新生。
228 8
|
网络协议 物联网 iOS开发
iOS - App 与外设间的通信方式
1、前言 一般 iOS 开发者做 App 开发大部分时候都是通过 Http(s) 请求跟后台服务器打交道,做一些信息展示和用户交互。很少涉及到去跟外部硬件设备连接的开发。随着近年来车联网和物联网的兴起,智能家居和智能硬件的逐步火热,越来越多的 App 被开发出来,用来跟硬件设备进行来连接,获取硬件相关信息展示或者发送指令控制硬件来提供服务。
2922 0
|
6月前
|
数据可视化 前端开发 数据管理
什么是低代码?一文看懂:低代码技术的发展历程及技术架构
低代码开发平台通过可视化界面与组件化设计,大幅降低编程门槛,使开发者无需大量编码即可快速构建应用。它具备可视化开发、预制组件、低技术门槛及全流程支持等核心特征,适用于业务流程自动化、数据管理、客户关系管理等多种场景。自萌芽期至今,低代码不断演进,成为企业数字化转型的重要工具,显著提升开发效率、降低成本,并推动全民开发者时代的到来。
1015 0
什么是低代码?一文看懂:低代码技术的发展历程及技术架构
|
10月前
|
前端开发 开发工具 Android开发
小红书APP的全新鸿蒙NEXT端性能优化技术实践
从 2023 年开始,鸿蒙的优势愈发明显,已经成为可与 iOS、安卓媲美的第三大移动操作系统。从一些抖音视频中也可以看出,鸿蒙在流畅性方面甚至在某些层面上超过了 iOS。本次分享的主题是小红书在鸿蒙平台上的工程实践,主要聚焦于性能优化和探索。
727 10
|
前端开发 JavaScript 小程序
基于Vue开发的门户网站展示和后台数据管理系统
基于Vue开发的门户网站展示和后台数据管理系统
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
3539 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
Python
Python pip : 无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
Python pip : 无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
1934 0
|
前端开发 JavaScript 开发者
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
本文提供了一个前端JS按钮点击事件、弹出式窗口和遮罩层的实战示例,包括HTML、CSS和JavaScript的具体实现代码,以及功能解析,演示了如何实现按钮点击后触发弹窗显示和遮罩层,并在2秒后自动关闭或点击遮罩层关闭弹窗的效果。
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例

热门文章

最新文章