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

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

1.如何创建轮播图组件

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

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

2.活数据渲染

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

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

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

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

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

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

 

 

相关文章
|
4月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
76 0
|
6月前
|
JSON 前端开发 JavaScript
ElementUI之首页导航及左侧菜单(模拟实现)
ElementUI之首页导航及左侧菜单(模拟实现)
143 0
|
6月前
|
小程序 JavaScript
微信小程序自定义底部tabBar按钮
微信小程序自定义底部tabBar按钮
103 0
|
7月前
|
存储 前端开发 JavaScript
ElementUI之首页导航与左侧菜单
ElementUI之首页导航与左侧菜单
44 0
|
2月前
|
小程序 JavaScript
【微信小程序】-- 页面导航 -- 导航传参(二十四)
【微信小程序】-- 页面导航 -- 导航传参(二十四)
|
6月前
|
小程序 前端开发 JavaScript
微信小程序底部按钮tabbar组件封装
微信小程序底部按钮tabbar组件封装
63 0
|
6月前
|
前端开发
关于ElementUI之首页导航与左侧菜单实现
关于ElementUI之首页导航与左侧菜单实现
64 0
|
8月前
|
前端开发 数据库 容器
ivx页面(4)下拉菜单的页面
ivx页面(4)下拉菜单的页面
46 0
|
9月前
|
小程序 索引
微信小程序-WXML列表渲染
在组件上使用 wx:for 控制属性绑定一个数组/数字/字符串, 即可使用数组中各项的数据重复渲染该组件,wx:for 默认自动将当前遍历到的数据放到 item 变量中,会自动将当前遍历的索引放到index变量中,如果想修改保存数据的变量名称,或修改保存索引的变量名称,我们可以: • 使用:wx:for-item 可以指定数组当前元素的变量名; • 使用 wx:for-index 可以指定数组当前下标索引的变量名;
87 1
|
9月前
|
前端开发
前端学习笔记202304学习笔记第十九天-vue3.0-渲染页面并跳转到用户详情页
前端学习笔记202304学习笔记第十九天-vue3.0-渲染页面并跳转到用户详情页
48 0