[U-view]解决事件U-view插件自带的轮播图点击事件获取数据ID的问题

于 2023-03-06 14:41:19 发布
阅读量324 收藏 1
点赞数
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45625778/article/details/129361954
版权
文章讨论了在处理click事件时，官方文档中的参数通常是数组的index，而非实际所需的ID。为了解决这个问题，提出了通过index查找对应数据的ID的方法，以便在页面跳转和渲染时能正确传递和使用ID。
摘要由CSDN通过智能技术生成

问题分析

代码
在这里插入图片描述
根据官方文档的描述：
在这里插入图片描述
在这里插入图片描述

click事件即使不传参也会回传一个形参，此形参是传入的数组的下标 index，获取到的并不是我们需要的id
在这里插入图片描述
而我们实际使用时，需要获取对应的真实id方便跳转页面时传参渲染。

解决方案

通过index查找到对应的数据的ID
在这里插入图片描述
在这里插入图片描述

浮云而已丶
关注
uni-app - uview Swiper 轮播图组件点击跳转链接（点击后拿到 item 行数据, 取出数据做操作）
王佳斌
08-09 4648
uni-app - uview Swiper 轮播图组件点击跳转链接解决方案（点击后拿到 item 行数据, 取出数据做操作），uView轮播图跳转，uview Swiper 轮播图组件点击轮播图时，跳转到详情或链接（点击执行操作），uview,轮播图点击跳转其它网页，uview swiper轮播图片如何添加点击跳转功能，uview,轮播图点击跳转网页,这样去写代码可以轻松实现，怎么实现点击轮播图后拿到 id，从而跳转页面详情，uniapp 点击轮播图跳转商品详情页面，用uni-app写了h5项目,使用了轮
基于Java+SpringBoot制作一个软考助手答题小程序
最新发布
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
06-10 5352
基于Java+SpringBoot制作一个软考小助手考试答题小程序。其中系统前端功能包括注册登录、公告通知、考试答题、视频课程、考试记录、题库、题目评论、错题统计、我的收藏和用户信息管理模块；系统后台功能包括用户管理、题库管理、答题管理、学习视频管理以及系统管理模块。
vue使用swiper组件循环轮播，点击事件连续跳转（穿透）
weixin_38838842的博客
07-29 1318
swiper在vue项目中的循环轮播bug以及点击事件
weixin_30765475的博客
09-20 632
　　一般的，如果是静态数据（本地数据），可以直接在mounted生命周期中初始化，循环轮播、自动播放都比较正常。 　　但是，如果是动态从后台获取数据的话，采用上述方法会发现，轮播图无法自动播放，也无法拖拽。 　　解决办法：在从后台获取完数据之后再初始化swiper，同时启动动态检查器observer，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swipe...
vue2.0实现一个简单的轮播图
热门推荐
不会指弹的厨子不是好Coder
08-15 5万+
因为之前一直在忙公司的项目，vue这块就生疏了不少，正好借这个小demo复习下vue的知识。
uview实现点击预览图片效果
inexaustible的博客
11-07 8571
1、在页面的图片上添加点击事件： 2、方法： //预览图片 imgListPreview(){ var urlList = [] urlList.push(this.userInfo.avatar) //push中的参数为 :src="item.img_url" 中的图片地址 uni.previewImage({ ...
如何在轮播的图片上添加点击事件
z1042511771的博客
11-27 3252
我想在轮播的图片中添加点击事件，点击图片就可以转到另一个Activity，应该怎么实现呢？下面是实现图片轮播的代码，我在了Fragment内（代码转载自：http://blog.csdn.net/l1028386804/article/details/48049913） package com.example.qsxy; import java.util.ArrayList;
小程序 | 黑马商城【未更完--实习去了】
不爱吃菜的菜菜的博客
11-07 1503
在项目根目录的components目录上，鼠标右键，选择新建组件，填写组件信息后，最后点击创建按钮：在分类页面的 UI 结构中，直接以标签的形式使用 my-search 自定义组件 < my-search > < my-search >
bootstrap插件 -- (笔记四)
lljxk2008的博客
10-24 258
bootstrap插件: Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动 利用 Bootstrap 数据 API, 可以在不编写任何代码的情况被触发 引用bootstrap插件:  引入bootstrap.js 或bootstrap.min.js 因为bootstrap插件依赖jquery, 所以在引入bootstrap.js 或bootstr...
uni-app中使用lodash_uniapp 基础
weixin_39692253的博客
11-21 1495
1.uni app 首次运行在微信开发者程序中时要打开设置->安全设置->服务端口2.开发规范：3.页面配置（pages.json）4.单页面配置（h5配置等）5.配置tabbar属性值实例（注意：tabbar配置后还需要把路径配置到pages.json，如页面配置一样）7、万物基于基础(基础组件)（常用）①、②、view实例③、button④、image8、uniapp的样式<...
一篇文章 - 轻松入门微信小程序
zyh1841474614的博客
01-10 3936
以前学习微信小程序开发时候的笔记,希望能对大家有帮助
在轮播图中进行添加点击事件
qq_41698131的博客
05-01 3834
当点击轮播图的时候,轮播图需要停止轮播;点击完成之后轮播图可以继续自动轮播;点击轮播图将数据里面的title进行吐司;当用手指滑动轮播图的时候,轮播图可以跟随手指进行滑动,停止自动轮播;当手指离开之后轮播自动继续只需要在给轮播图设置加载图片的时候添加public class MyVpAdapter extends PagerAdapter {    //数据源    private List&lt...
图片轮播添加点击事件遇到的问题
MIRAGE086的专栏
11-04 1747
因为需求修改需要给图片轮播添加点击事件，打开对应的url，之前实现是UIScrollView添加UIImageView做子视图，所以考虑给UIImageView添加 UITapGestureRecognizer，但是后来测试发现点击手势只能传递到UIScrollView，无法传递到它的子视图，后来还是在StackOverflow上找到解决办法，对po主没用的方法对我还是有用的啊： [image
uview轮播图
yhd1998的博客
10-18 2861
自动轮播图(可以有点击事件的其中点击事件用 block 传值)
qq_33663897的博客
04-12 1029
自动轮播图自己封装的文件其中包括轮播图的点击方法使用了 block 在. h 文件中import import “AutoScrollView.h”import “UIImageView+WebCache.h”@interface AutoScrollView () @property (nonatomic, strong) UIScrollView *scrollView; @propert
如何在轮播图片上加入点击事件
z1042511771的博客
11-28 2047
这是我加在里面的代码，用Switch（position） 来获取当前图片，在相应的图片上加入点击事件，case  0：，case 1：时代码如下，当点击第一张图片时，想实现case 0里面的代码，但是直接直接报错，退出，当点击第二张实现case 1中的代码时却是没问题，我想知道到底哪里不对啊。对了，这些代码是在Fragemnt内写的，点击图片时是要从一个Fragment转到一个Activity
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值