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

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

1.如何创建轮播图组件

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

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

2.活数据渲染

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

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

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

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

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

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

 

 

相关文章
|
6月前
|
JavaScript 数据安全/隐私保护 UED
UniApp 中的路由魔法:玩转页面导航与跳转
UniApp 中的路由魔法:玩转页面导航与跳转
1625 3
|
6月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
175 0
|
JSON 前端开发 JavaScript
ElementUI之首页导航及左侧菜单(模拟实现)
ElementUI之首页导航及左侧菜单(模拟实现)
214 0
|
SQL JavaScript 前端开发
使用ElementUI结合Vue完善主页的导航菜单和书籍管理的后台数据分页查询
使用ElementUI结合Vue完善主页的导航菜单和书籍管理的后台数据分页查询
56 0
|
存储 前端开发 JavaScript
ElementUI之首页导航与左侧菜单
ElementUI之首页导航与左侧菜单
66 0
|
3月前
|
JavaScript
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
这篇文章介绍了在Vue中如何使用Swiper插件创建轮播图,解决Swiper左右切换按钮不生效的问题,并展示了如何将Swiper轮播图抽离成一个可复用的公共组件,同时提供了详细的安装、配置和优化建议。
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
|
5月前
|
JavaScript
如何实现vue点击按钮进行图片浏览 ?
如何实现vue点击按钮进行图片浏览 ?
|
5月前
|
JSON 前端开发 JavaScript
8.ElementUI之首页导航+左侧菜单
8.ElementUI之首页导航+左侧菜单
49 0
|
11月前
|
JSON 前端开发 测试技术
ElementUI之首页导航+左侧菜单
ElementUI之首页导航+左侧菜单
79 0
|
11月前
|
JavaScript 算法 API
使用ElementUI结合Vue完善主页的导航菜单和书籍管理以及后台数据分页查询
使用ElementUI结合Vue完善主页的导航菜单和书籍管理以及后台数据分页查询
41 0