小程序中两层wx:for 第二层如何获得第一层的for循环的index值

最新推荐文章于 2024-04-25 17:11:22 发布
最新推荐文章于 2024-04-25 17:11:22 发布
阅读量2.5k 收藏 4
点赞数 1
文章标签： 小程序 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z_PTOPONE/article/details/123064116
版权

在项目中，需要使用第二层for循环中的index值，那么如何拿到第一层for循环的index值？

其实很简单，我们只需要在第一层for循环中使用wx:for-index=“变量名称”

然后在第二层for循环中使用这个变量就可以了，这个变量就是第一层for循环的index值

注意一点，wx:key=“index” 这个虽说也是index，也是从0开始，但你无法在第二层for循环中使用index这个变量，wx:key 与 wx:for-index 要注意区分

php全栈小白
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序使用 wx:for 循环渲染 slideview 无法获取 index 的问题解决办法
TonySmith的博客
02-12 1831
Slideview | 微信开放文档 使用 wx:for 循环渲染 slideview <mp-slideview wx:for="{{slideviewList}}" wx:key="id" buttons="{{slideButtons}}" bindbuttontap="slideButtonTap"> <view>...</view> &l...
微信小程序双层循环获取外层索引值
weixin_42017221的博客
02-09 451
【代码】微信小程序双层循环获取外层索引值。
wx:for、wx:for-item、wx:for-index一看就懂
最新发布
weixin_50162884的博客
04-25 537
瞬间了解 wx:for、wx:for-item、wx:for-index
微信小程序 获取wx:for下标
wyqvong的博客
03-04 8782
刚接触小程序，想通过看文档一边自学一边做一个简单但是刚需的小程序 在使用wx:for循环button按钮的时候，我需要获取每个按钮的下标index，但是官方文档好像并没有说的很清楚，后来通过面向百度编程找到了解决方法 在标签上加 wx:for-index="index" data-index="{{index}}" 即 <button wx:for="{{picks}}" ...
wx:for 微信小程序双重for嵌套如何获取内层的迭代对象
m0_63622279的博客
09-08 904
思路就是，外层for直接通过默认的item进行迭代，然后内层的for，通过wx:for-item="xxx"的方式指定内部迭代名称。
关于wx:for 和它的索引问题
DSs1206的博客
09-29 995
首先 我们需要一个数组 list:[ { id:0, name:"a" }, { id:1, name:"b" }, { id:2, name:"c" } ] 渲染这个数组 渲染方法 <view wx:for="{{list}}">{{index}}</view> 当然不一定是非要这种的方式 在官方..
小程序如何获取wx:for列表中点击行的信息？
weixin_44266024的博客
12-08 1402
小程序如何获取wx:for列表中点击行的信息？
微信小程序wx:for循环的实例详解
10-17
微信小程序的`wx:for`循环是用于列表渲染的关键特性，它允许开发者通过绑定一个数组来重复渲染组件，展示动态数据。以下是对`wx:for`循环的详细说明： 1. **基本用法**： - `wx:for`属性需要绑定到一个数组，数组...
微信小程序wx:for和wx:for-item的用法详解
08-27
主要介绍了微信小程序wx:for和wx:for-item的正确用法,wx:for是循环数组，wx:for-item即给列表赋别名,文中给大家列出来几个错误用法，大家一起学习下
微信小程序wx:for的使用，动态传参
03-29
在小程序的开发过程中，经常会用到在前端页面循环打印一个数组或者对象的数据，这样的话就需要用wx：for来实现。 一般情况下，小程序的utils这个文件夹下，我们可以把本地的数据写进去，封装成.js文件，提供对外暴露...
微信小程序 wx:for遍历循环使用实例解析
12-12
这篇文章主要介绍了微信小程序 wx:for遍历循环使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图如下: 实现代码如下: type.js: // pages/...
微信小程序-获取点击项的索引值index
weixin_42017221的博客
02-08 337
在被点击项上绑定点击事件bindtap,以及data-index="{{index}}"。1.currentTarget:绑定的事件当前元素及其子元素都会触发。2.target: 绑定的事件 子元素不会被触发事件。
关于微信小程序多层嵌套渲染列表以及嵌套列表中数据的获取
weixin_33858336的博客
10-23 2658
起因：意图是想实现类似于安卓viewpager那样的效果，想到了用微信小程序的swiper组件，但如果每个swiper-item里都只用一个wx:for来渲染数据的话实在是太慢了，就想到多层嵌套数据渲染来提高效率。 直接上代码 wxml： <view wx:for="{{one}}" wx:key="id"> <vi...
微信小程序 - 循环语句wx:for的使用
sunshime的博客
09-16 3657
  小程序的循环结构：wx:for，其中，wx:for对应的是要循环的那个数组，wx:for-index对应的是循环数组的索引值，wx:for-item对应的是循环数组中的每一项，wx:key表示的是数组的唯一值（在使用wx:for的时候要加上这个，否则编译器会提示警告）。 下面举个例子： 在index.wxml文件中 <view class='sort-ct-item' wx:for='{...
wx:for的使用，以及自定义item和index
海贼王某人的博客
06-19 3522
wx:for语法,自定义item,index 如下就是自定义item和index，直接使用items,indexs <view wx:for="{{List}}" wx:for-item="items" wx:for-index="indexs" wx:key="indexs"> {{items.name}} </view> wx:for默认语法 如果没有自定义item和index的话默认就直接使用item,index就行了 <view wx:for="{{List}}"
wx:for
weixin_43663349的博客
04-29 224
wx:for="{{数组}}" 作用：使用数组数据重复渲染组件 易错：记得数组外面的"{{}}",变量的引用要加{{}} index：为下标，修改用wx:for-index="xx" item:为当前项的变量名：修改用wx:for-item="xx" 可嵌套 9*9 <view wx:for="[]">//错 </view> <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i"> <view wx:
微信小程序：两层循环的练习，两层循环显示循环图片大图（大图显示、多层循环）
weixin_46001736的博客
11-01 2709
微信小程序：两层循环的练习，两层循环显示循环图片大图（大图显示、多层循环）
微信小程序wx:for 的使用以及wx:key绑定
weixin_43364458的博客
03-05 6191
wx:for使用以及使用wx:key注意事项
微信小程序 wx:for 循环中 同index 怎样获取多个输入框的值
06-09
在微信小程序的wx:for循环中，如果需要获取同一个索引的多个输入框的值，可以使用数据绑定和事件处理函数相结合的方式来实现。 具体做法是，在每个输入框上设置一个data-index属性，并将其值设置为当前循环的索引值index。然后，在输入框的input事件处理函数中，通过event.target.dataset.index来获取到当前输入框的索引值，并将输入框的值存储到对应的数组中。 例如，假设有一个数组列表dataList需要渲染，每个列表项都包含两个输入框，需要获取每个输入框的值： ``` <view wx:for="{{dataList}}" wx:key="{{index}}"> <view class="list-item"> <input type="text" data-index="{{index}}" bindinput="onInput1" /> <input type="text" data-index="{{index}}" bindinput="onInput2" /> </view> </view> ``` 在这个例子中，我们在每个输入框上绑定了data-index属性，并将其值设置为当前循环的索引值index。然后，在onInput1和onInput2事件处理函数中，我们可以通过event.target.dataset.index获取到当前输入框的索引值，并将输入框的值存储到对应的数组inputValue1和inputValue2中。 ``` Page({ data: { dataList: [], inputValue1: [], inputValue2: [] }, onInput1: function(event) { var index = event.target.dataset.index; var value = event.detail.value; this.data.inputValue1[index] = value; }, onInput2: function(event) { var index = event.target.dataset.index; var value = event.detail.value; this.data.inputValue2[index] = value; } }) ``` 需要注意的是，在使用数据绑定和事件处理函数的方式时，需要确保数组inputValue1和inputValue2的长度与dataList的长度相同，否则可能会出现数组越界等问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

php全栈小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值