#微信小程序#wx:for循环时点击其中某个子组件如何获取它的下标？

最新推荐文章于 2024-07-25 14:09:03 发布
最新推荐文章于 2024-07-25 14:09:03 发布
阅读量4.7k 收藏 10
点赞数 3
分类专栏： 前端 文章标签： 微信小程序 小程序 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43811390/article/details/121875419
版权

问题描述：在小程序中写一个循环组件，需要实现这个功能：点击其中某个子组件，就把这个组件从这个数组中删除，但是不知道点击事件中返回e如何加入代表该子组件下标的信息。
wx:for用到的是一个普通数组[a,b,c]，不想要写一个对象数组，给每一个元素一个序号属性[{value:“a”, id:“0”}, {value:“b”, id:“1”}, {value:“c”, id:“2”}]，而是直接获取它的下标。

解决方法：

        <block wx:for="{
    {photoList}}" wx:for-item="item
最低0.47元/天 解锁文章
小桥流水叮冬
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序使用 wx:for 循环渲染 slideview 无法获取 index 的问题解决办法
TonySmith的博客
02-12 1835
Slideview | 微信开放文档 使用 wx:for 循环渲染 slideview <mp-slideview wx:for="{{slideviewList}}" wx:key="id" buttons="{{slideButtons}}" bindbuttontap="slideButtonTap"> <view>...</view> &l...
微信小程序中使用wx:for，循环中绑定点击事件，对数组进行渲染
qq_42853710的博客
03-25 5842
微信小程序实际开发中，在for循环中，需要获取用户对那组数据进行了修改，使用了vue太久，微信小程序有点忘记了，查阅资料后也是很快熟悉起来，但是赋值过程中遇到了一些小问题，解决了，特此记录一下。 1、在for循环中使用switch开关，用户点击对应开关，需要将对应数组中checked改变状态 <switch style="zoom:.8;margin:30rpx 0 0 20rpx;" type="switch" checked="{{item.checked}}" bindchange="list
小程序实践（五）：for循环绑定item的点击事件
defukwanmcth26174的博客
07-12 2704
微信展示列表效果借助于 wx:for 简单写一个列表（wxml文件中）： 　　 对应的数据源(js文件中)： 　　 写一个点击监听： 　　 效果： 　　 以上、可以实现列表的item点击效果，但是无法到点击的item对应的数据源数据 -------------------------------------------------...
微信小程序项目总结：for循环，绑定点击事件，二维数组列表渲染_小程序wx for二维数组
2401_84411557的博客
05-09 427
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】"title" : "第一个标题","content":"第一个内容"},"title" : "第二个标题","content":"第二个内容"},"title" : "第三个标题","content":"第三个内容"}需要触发readDetail事件时，取到对应的id调接口查看详情。可是小程序又不允许事件名后直接注入id参数。
微信小程序双层/多层 wx:for 循环嵌套，关于内外层的 index 和 item ；data-index 传递两个参数
m0_74132943的博客
06-06 1502
那么关于内外层的 index 下标关系：在默认情况下，这个第二层的循环也是用 index 作为下标；也就是说如果你是在第二层循环中输出 {{index}} 那么这个输出的是第二层的下标值；它的主要作用是告诉小程序每个循环项目的唯一标识符，这样小程序在重新渲染或进行 DOM 操作时可以优化性能。item 也和 index 同理，在不同的循环层中会覆盖不同的 item 值。那么接收到的数据就如下：0是第一层循环的下表，1是第二层循环的下标。的值作为循环项目的唯一标识符，从而在需要重新渲染或更新时提高效率。
微信小程序 -- wx:for
qq_53431161的博客
04-02 366
文章目录 语法 项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名 下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名 wx:key ⽤来提⾼数组渲染的性能 wx:key 绑定的值 有如下选择 wx:key = “string” 表⽰循环项中的唯⼀属性 wx:key = “*this” 它的意思是 item 本⾝ ,用于简单数组遍历 <view wx:for="{{ list }}" wx:for-item="item" wx:fo
【微信小程序】基础篇 -- WXML 模板语法 - 列表渲染 -- wx:for & wx:key（十二）
JMFive的博客
02-28 7394
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第12篇文章;今天开始学习微信小程序的第八天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。不知不觉已经学习微信小程序八天了，估计大佬们一天就学完这些内容了吧，我还在慢吞吞的学完，然后在看官方文档总结写写文章。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。
微信小程序wx:for循环
qq_33544633的博客
08-28 6407
列表渲染 wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item view wx:for="{{array}}"> {{index}}: {{item.message}} view> Page({ data: { array: [{
微信小程序开发系列（二十四）·wxml语法·列表渲染·wx:for-item 和 wx:for-index
时光の尘的博客
03-08 1733
索引：{{ index }}, 水果名称：{{ fruitItem.name }}
微信小程序中wx:for语法及其使用
weixin_43250576的博客
02-21 4548
微信小程序官方文档中wx:for 是用来做列表渲染，在组件上使用wx:for绑定一个数组，数组的下标变量名默认为index,数组当前项的变量名默认为item. 在Wxml中可以使用for循环获取数组数据（记住for循环后面跟的是数组，当然数组里可以有字典，字符串等等） 例： <view wx:for = “{{[’'张三”,“李四”]}}"> {{index}}:{{item}} &...
微信小程序wx:for循环的实例详解
10-17
微信小程序的`wx:for`循环是用于列表渲染的关键特性，它允许开发者通过绑定一个数组来重复渲染组件，展示动态数据。以下是对`wx:for`循环的详细说明： 1. **基本用法**： - `wx:for`属性需要绑定到一个数组，数组...
微信小程序 for 循环详解
09-01
在微信小程序开发中，`for`循环是一种常用的数据遍历方式，它允许开发者根据数组中的数据重复渲染组件。本文将详细解析微信小程序中`for`循环的使用方法和实例。 1. **`wx:for`指令** `wx:for`是微信小程序中用于...
微信小程序：漫画小程序项目总结
03-29
项目考察点： 1、wx:for 循环的使用。  2、this.setData 内获取动态数组数据的方式。  3、难点：在有旁白内容时，点击旁白隐藏内容，...2、使用 wx:for 循环输出四个图片，每个图片包含一个 view 组件。每个 view 中
微信小程序安装vant组件库和使用
qq_61132537的博客
07-23 659
van-button type="primary">主要按钮</van-button>
基于微信小程序的课堂考勤系统的设计与实现(论文+源码)_kaic
涉及毕业论文、远程调试、小程序、管理系统、JAVA、C#、IDEA、VS开发工具等
07-24 844
基于微信小程序的课堂考勤系统的设计与实现摘 要 在高校教育普及的今天，学生人数日益增多，为保证课堂质量，教师多要在课前进行考勤。因此本设计提出基于微信小程序的课堂考勤系统，增加了定位功能，避免了“假打卡”、代打卡等情况，在监督学生上课的同时，增进了出勤率的精确性与可信性。本文提出了基于微信小程序的课堂考勤系统，使用Windows操作系统、后端技术使用Java语言、SpringBoot框架进行搭建与编写前端技术采用Vue、使用MySQL作为数据库、数据库工具采用Navicat、开发工具选择IDEA服务器
【计算机毕业设计】基于微信小程序的传染病防控宣传系统【源码+lw+部署文档】
07-23 925
目录第一章 绪论1.1 研究背景1.2 研究意义1.3 研究内容第二章 开发环境与技术2.1 JSP技术2.2 MySQL数据库 2.3 Java语言2.4 微信开发者工具第三章 系统分析3.1可行性分析3.1.1运行可行性分析3.1.2经济可行性分析3.1.3技术可行性分析3.2系统流程分析3.3 系统性能分析3.3.1系统安全性3.3.2系统可扩展性3.3.3系统易维护性3.4系统功能分析第四章 系统设计4.1布局设计原则4.2功能模块设计4.3数据库设计4.3.1数据库E-R图4.3.2 数据库表结构
如何怎么封装微信小程序的数据请求的
yajia2的博客
07-23 511
'content-type': 'application/json', // 默认值。wx.showLoading({ title: "加载中" });1、在小程序的目录下新建一个 api 的文件夹。// 引入 api 下的 index 文件。前3步是一样的，区别就是封装请求的不同。封装所有请求 api/http.js。title: '接口请求错误',reject('接口请求错误')//引入封装的reuest请求。* data: 要传递的参数。* url:请求的接口地址。//基于业务封装的接口。
基于微信小程序的校园二手交易平台/Java的二手交易网站/基于Javaweb校园二手商品交易系统（附源码）
最新发布
2401_84733791的博客
07-25 793
使用校园二手交易平台管理校园二手物品交易，不仅实现了智能化管理，还提高了管理员的管理效率，用户查询的功能也需要校园二手交易平台来提供。 设计校园二手交易平台是毕设的目标，校园二手交易平台是一个不断创新的系统，创新是将系统框架进行结合，经过很长一段时间了解了前后端开源框架之后，最终选择了开源框架SSM，以微信小程序为基础实现了校园二手交易平台。为了实现编程语言选择采用Java来实现系统代码和采用数据库MySQL来存储系统中的信息。 关键词；SSM；二手交易；MySQL
微信小程序 实现分页 wx:for
02-08
微信小程序中实现分页可以使用wx:for指令，可以在模板中循环渲染数据。在数据源中设置分页参数，在模板中使用wx:for指令循环渲染数据，并使用按钮或其他控件控制分页。 示例代码： 1. 数据源： ``` data: { page: 1, perpage: 10, list: [...], } ``` 2. 模板： ``` <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="*this"> <view>{{index}}: {{item}}</view> </view> ``` 3. 分页控制： ``` <button bindtap="prevPage">上一页</button> <button bindtap="nextPage">下一页</button> ``` 4. JS： ``` prevPage: function() { this.setData({ page: this.data.page - 1 }); }, nextPage: function() { this.setData({ page: this.data.page + 1 }); } ``` 请注意，这是一个简单的示例，在实际应用中，还需要考虑数据请求、状态管理等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值