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

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

1.如何创建轮播图组件

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

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

2.活数据渲染

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

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

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

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

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

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

 

 

相关文章
|
7月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
201 0
|
JSON 前端开发 JavaScript
ElementUI之首页导航及左侧菜单(模拟实现)
ElementUI之首页导航及左侧菜单(模拟实现)
242 0
|
4月前
|
JavaScript
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
这篇文章介绍了在Vue中如何使用Swiper插件创建轮播图,解决Swiper左右切换按钮不生效的问题,并展示了如何将Swiper轮播图抽离成一个可复用的公共组件,同时提供了详细的安装、配置和优化建议。
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
|
4月前
|
前端开发
前端ElementPlus框架中的几种图标按钮使用方式
本文介绍了如何在Element Plus前端框架中使用带有图标的按钮,包括设置按钮大小、图标大小、按钮类型以及如何为图标添加点击事件。
423 0
|
6月前
|
JavaScript
如何实现vue点击按钮进行图片浏览 ?
如何实现vue点击按钮进行图片浏览 ?
|
小程序 前端开发 JavaScript
微信小程序底部按钮tabbar组件封装
微信小程序底部按钮tabbar组件封装
99 0
|
JSON 前端开发 JavaScript
ElementUI首页导航和左侧菜单静态页面的实现,以及Mockjs和总线的介绍
ElementUI首页导航和左侧菜单静态页面的实现,以及Mockjs和总线的介绍
|
小程序 JavaScript 容器
小程序封装拖拽菜单组件(uniapp拖拽排序,自定义菜单)
movable-area 是 uniapp 的可移动区域组件。它用于定义可移动视图容器,在其内部可拖拽移动子视图。
632 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-菜单路由和面包屑2
前端学习笔记202305学习笔记第二十二天-菜单路由和面包屑2
63 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-菜单路由和面包屑1
前端学习笔记202305学习笔记第二十二天-菜单路由和面包屑1
46 0