uniapp中@click或者@tap多层嵌套的问题解决方法

我们在开发页面的过程中。例如要设计一个九宫格的相册,并且加上删除上传图片和点击图片后预览图片大图的功能例如下图的演示功能。

在这里插入图片描述点击图片后显示大图预览图片,点击x号后要删除掉当前的图片,那么我们设计的时候如果我们代码写成如下的格式

<view class="xiangce"><view class="xiangce-item"  v-for="(item,key) in imglist" :key="key" @click="showimg(item)"><view class="jiaobiao" @click="delImg(key)"><u-icon name="close-circle-fill"></u-icon></view><image :src="item" mode="aspectFill"></image></view>	
</view> 

通过上面我们可以看到我们涉及到了两个点击的操作调用了不同的方法,就会遇到一个问题就是点击外围@click="showimg(item)"是生效的,但是点击@click="delImg(key)"是不生效的,那么我们处理的方式很简单

把内部的@click修改为@click.native.stop

另外我们如果用的@tap则修改为@tap.stop就可以了。

这个仅仅是我自己的一个笔记整体九宫格实现的代码后续整理再发布。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言】栈的实现(数据结构)

前言&#xff1a; 还是举一个生活中的例子&#xff0c;大家都玩过积木&#xff0c;当我们把积木叠起来的时候&#xff0c;如果要拿到最底部的积木&#xff0c;我们必须从顶端一个一个打出&#xff0c;最后才能拿到底部的积木&#xff0c;也就是后进先出&#xff08;先进后出&a…

硬件厂家行业进销存系统开发之门票预约,源码解析css样式

采用技术未来之窗web行业应用弹窗对话框artDialog 未来之窗web行业应用弹窗对话框artDialog: 网页弹窗&#xff0c;独立使用单文件版本&#xff0c;可指定位置&#xff0c;左上&#xff0c;左下&#xff0c;中间&#xff0c;右侧&#xff0c;下册&#xff0c;左侧&#xff0c;…

音乐曲谱软件Guitar Pro 8.2 for Mac 中文破解版

Guitar Pro 8.2 for Mac 中文破解版是一款功能强大的音乐曲谱软件&#xff0c;非常适合学习如何玩&#xff0c;改进技巧&#xff0c;重现喜爱的歌曲或陪伴自己。 Guitar Pro for Mac 是一款功能强大的音乐曲谱软件&#xff0c;非常适合学习如何玩&#xff0c;改进技巧&#xf…

做一个能和你互动玩耍的智能机器人之一

2024年被很多人称为AI元年&#xff0c;其实AI元年的叫法由来以久&#xff0c;近年来每一次AI技术的进步&#xff0c;都有很多圈内人大呼AI元年&#xff0c;但不仅一直风声不大&#xff0c;雨点也偏小&#xff0c;都是小范围交流。 得益于软硬件的进步&#xff0c;AI今年开始侵…

深度学习系列70:模型部署torchserve

1. 流程说明 ts文件夹下&#xff0c; 从launcher.py进入&#xff0c;执行jar文件。 入口为model_server.py的start()函数。内容包含&#xff1a; 读取args&#xff0c;创建pid文件 找到java&#xff0c;启动model-server.jar程序&#xff0c;同时读取log-config文件&#xff…

数据库表结构创建

一、原型图 二、分析 1、天气&#xff0c;值字段只有实测值&#xff0c;可用一个字段表示&#xff08;单位、来源同上&#xff09; 2、气温有默认值与实测值两个选项&#xff0c;一个字段无法表示默认值与实测值&#xff08;单位&#xff0c;来源同上&#xff09; 3、因为有…

【Kettle实现神通(数据库)MPP增量、全量数据ETL,同步任务Linux运行(通用)】

1、背景介绍 具体Kettle操作步骤不做过多介绍&#xff0c;主要技术方案说明&#xff0c;Kettle8.2版本放在底部链接提取&#xff0c;本次采用Kettle实现源端&#xff1a;神通数据通用库、目标端&#xff1a;神通MPP增量数据同步&#xff0c;并在服务器端运行Job。 2、windows…

【AIGC】构建自己的谷歌搜索引擎服务并使用

一、谷歌 谷歌的搜索引擎需要自己创建服务才能启用检索api。&#xff08;需自行翻墙和创建自己的谷歌账号&#xff09; 1.1 API服务创建 1&#xff09;登陆https://console.cloud.google.com/: 2&#xff09; 选择新建项目&#xff0c;取号项目名即可&#xff08;比如:Olin…

在 Windows 搭建 flink 运行环境并模拟流数据处理

一、引入 在大数据场景中,开发者追求高效与灵活,Linux 系统以其稳定性成为众多组件的首选,但在资源有限的情况下,在本机搭建一个 Linux 虚拟机集群却显得过于笨重,启动、运行占资源,需要配置网络,无法和windows共享资源,尤其是对只有 8GB 内存的 Windows 系统用户来说…

钙成像数据建模为行为事件

摘要 我在触摸屏盒中记录了小鼠在进行行为学习任务时的钙映像数据。 我想找到一种方法来整合神经数据&#xff08;100 个个体细胞随时间的活动&#xff08;约 30,000 x 约 30 毫秒时间段&#xff09;&#xff09;和行为数据&#xff08;动物在行为任务期间做出的时间戳动作和决…

电脑如何进行录屏?电脑录屏无压力!

在数字时代&#xff0c;屏幕录制已成为我们日常生活和工作中不可或缺的一部分。无论你是想要制作教程、记录游戏过程&#xff0c;还是捕捉在线会议的精彩瞬间&#xff0c;掌握屏幕录制的方法都显得尤为重要。本文将为你详细介绍电脑如何进行录屏&#xff0c;帮助你轻松捕捉屏幕…

MySql 触发器、存储器练习

一&#xff1a; 触发器 1、建立两个表:goods(商品表)、orders(订单表) 查看数据库&#xff1a;mysql> show databases; 使用数据库&#xff1a;mysql> use mydb16_trigger; 创建goods表&#xff1a; mysql> create table goods(gid char(8) not null primary key, …

免费【2024】springboot 畅游游戏销售平台

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

AnyMP4 Data Recovery for Mac v1.5.8免激活版:高效数据恢复新选择

AnyMP4 Data Recovery for Mac是一款专为Mac用户设计的高效数据恢复软件&#xff0c;凭借其强大的功能和简洁的操作界面&#xff0c;为用户提供了快速、安全的数据恢复体验。 该软件支持恢复多种文件类型&#xff0c;包括照片、视频、音频、文档等&#xff0c;无论是常见的图片…

pytorch-梯度下降

梯度下降 y x 2 ∗ s i n ( x ) y ′ 2 x s i n x x 2 c o s x x 1 x − Δ y ′ ( x ) 其中 Δ 表示学习率&#xff0c; y ′ ( x ) 代表 y 在 x 点处关于 x 的梯度。 y x^2 * sin(x) \\ y 2xsinxx^2cosx \\ x_1 x - \Delta y(x) \\ 其中 \Delta 表示学习率&#xff0c…

python机器学习8--自然语言处理(2)

1&#xff0e;移除用词 在很多情况下&#xff0c;有一些文章内的英文字符、标点符号分词的结果不符合自己的预期&#xff0c;会出现一些不想要的分词&#xff0c;此时就能通过以下的函数自己设定用词&#xff0c;并且删除。 jieba.analyse.set_stop_words("stop_words.tx…

uniapp引入自定义图标

目录 一、选择图标&#xff0c;加入购物车 二、下载到本地 三、导入项目 四、修改字体引用路径 五、开始使用 这里以扩展iconfont图标为例 官网&#xff1a;iconfont-阿里巴巴矢量图标库 一、选择图标&#xff0c;加入购物车 二、下载到本地 直接点击下载素材&#xff0…

地球的2亿年轮回:彗星雨下的地质巨变与未来展望

在浩瀚的宇宙中&#xff0c;地球正悄然经历着一次巨大的轮回。你是否曾想过&#xff0c;地球为何拥有如此活跃的板块构造和与众不同的大陆&#xff1f;科学家们发现&#xff0c;每隔大约2亿年&#xff0c;地球便会遭遇一场彗星雨&#xff0c;这场彗星淋浴不仅改变了地球的面貌&…

【TAROT学习日记】韦特体系塔罗牌学习(8)——战车 THE CHARIOT VII

韦特体系塔罗牌学习&#xff08;8&#xff09;——战车 THE CHARIOT VII 目录 韦特体系塔罗牌学习&#xff08;8&#xff09;——战车 THE CHARIOT VII牌面分析1. 基础信息2. 图片元素 正位牌意1. 关键词/句2.爱情婚姻3. 学业事业4. 人际财富5. 其他象征意 逆位牌意1. 关键词/句…

yolov5使用flask部署至前端,实现照片\视频识别

初学yolo flask时&#xff0c;需要此功能&#xff0c;Csdn、Github、B站找到许多代码&#xff0c;效果并不满意。 近期&#xff0c;再度尝试&#xff0c;实现简单功能。 实现功能&#xff1a; 上传图片并识别,可以点击图片放大查看 上传视频并识别 识别后的文件下载功能 …