微信小程序 Utils丨wx:for / wx:for-index / wx:for-item

最新推荐文章于 2024-06-06 11:10:43 发布
最新推荐文章于 2024-06-06 11:10:43 发布
阅读量1.9k 收藏 6
点赞数 14
分类专栏： 微信小程序实用源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15609303/article/details/101704806
版权

在开发中，我们经常会遇到展示列表数据的需求，在小程序中需要使用标签 wx:for / wx:for-index / wx:for-item 来实现相关功能，运行效果如下所示。

wx:for="{{mainListViewData}}" ： 定义循环，数组名称为 mainListViewData

wx:for-index=“mainListViewDataIndex” ： 定义索引值的名称 mainListViewDataIndex

wx:for-item=“mainListViewDataItem” ： 定义索引值对应项名称 mainListViewDataItem

在这里插入图片描述

实现步骤（分2部分 .wxml 和 .js ）

1. 在 .wxml 文件中定义 列表与别名

在这里插入图片描述

2. 在 .js 文件中创建 数组与赋值
在这里插入图片描述

在这里插入图片描述

MobMsg
关注
  • 14
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
微信小程序wx:for 的使用以及wx:key绑定
weixin_43364458的博客
03-05 6220
wx:for使用以及使用wx:key注意事项
小程序开发之视图层WXML列表渲染、条件渲染
M.Siebel
01-07 492
列表渲染 列表wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 例1： index.wxml <!--index.wxml--> <view wx:for="{{array}}">{{item}}</view> index...
微信小程序wx:for wx:for-index data-xxx及相关字段说明
热门推荐
qq_28670711的博客
07-31 1万+
wx:for="{{list}}" //list为要循环遍历的数组 wx:for-items="{{list}}" //list为要循环遍历的数组，同for一样 wx:for-item="item" //item作为代表每一项的对象 wx:key="{{index}}" //作为遍历数组的唯一标识符 wx:for-index="{{fc}}" //’它是指向当前元...
微信小程序双层/多层 wx:for 循环嵌套，关于内外层的 index 和 item ；data-index 传递两个参数
最新发布
m0_74132943的博客
06-06 1563
那么关于内外层的 index 下标关系：在默认情况下，这个第二层的循环也是用 index 作为下标；也就是说如果你是在第二层循环中输出 {{index}} 那么这个输出的是第二层的下标值；它的主要作用是告诉小程序每个循环项目的唯一标识符，这样小程序在重新渲染或进行 DOM 操作时可以优化性能。item 也和 index 同理，在不同的循环层中会覆盖不同的 item 值。那么接收到的数据就如下：0是第一层循环的下表，1是第二层循环的下标。的值作为循环项目的唯一标识符，从而在需要重新渲染或更新时提高效率。
微信小程序wx:for自定义item和index方法
weixin_43837268的博客
05-30 2792
<view wx:for="{{array}}" wx:for-index="myIndex" wx:for-item="myItem"> {{myIndex}}: {{myItem}} </view>
for of循环获取index索引值，并且修改自身元素
m0_51431448的博客
05-07 8258
for of多数使用场景是这样子的： let arr = [1, 2, 3, 4] for(let item of arr) { console.log(item) } 这样就能拿到里面每一项的值了，但是是拿不到每一项的索引值的，并且也不能对自身元素进行修改，看下例子： let arr = [1, 2, 3, 4] for(let item of arr) { item = item * 10 } console.log(arr) // [ 1, 2, 3, 4 ] 发现并没能修改，如果
微信小程序wx:for的使用，动态传参
03-29
在小程序的开发过程中，经常会用到在前端页面循环打印一个数组或者对象的数据，这样的话就需要用wx：for来实现。 一般情况下，小程序的utils这个文件夹下，我们可以把本地的数据写进去，封装成.js文件，提供对外暴露...
微信小程序 wx:for的使用实例详解
08-30
在微信小程序的开发中，`wx:for` 是一个非常重要的指令，用于在 WXML（微信小程序的模板语言）中实现数据的循环渲染。通过 `wx:for`，开发者能够轻松地将数组或对象的数据展示在前端页面上，极大地提高了用户体验和...
wx-drag-sort:微信小程序拖拽排序
05-09
`wx-drag-sort` 是一个专门针对微信小程序设计的拖拽排序库，它利用 JavaScript 技术，使得用户可以通过直观的手势来调整列表元素的顺序。在本文中，我们将深入探讨如何使用 `wx-drag-sort` 实现这一功能，以及涉及...
wx-utils:一个微信工具库
05-10
`wx-utils`是一个专为微信小程序开发设计的工具库，它包含了多种实用的功能模块，旨在简化微信小程序的开发工作，提高开发效率。这个库的核心在于提供了一系列针对HTTP请求、Promise处理、技巧提示以及与微信小程序...
微信小程序开发系列（二十四）·wxml语法·列表渲染·wx:for-item 和 wx:for-index
时光の尘的博客
03-08 1736
索引：{{ index }}, 水果名称：{{ fruitItem.name }}
微信小程序开发—(十二)列表
汉堡请不要欺负面条
05-12 1782
一.知识点 (一).列表渲染 wx:for tip:wx:for=“array”可以等于参数名，在js中调用 Page({ data:{ array: [{name: '小李'},{ name: '小高'}]}  })，获取值；也可以直接把wx:for="{{[1, 2, 3]}}"，把值放在上面 1.在组件上使用wx:for控制属性绑定一个数组，即可使
微信小程序-搞懂wx:for wx:index wx:item
LuxuryZed的博客
07-13 2320
微信小程序-搞懂wx:for wx:index wx:item Python理解
wx:for-item wx:for-index wx:for-key
qq_43235503的博客
11-10 511
wx:for-item wx:for-index wx:for-key
wx:for wx:for-item wx:for-index wx:for-key
weixin_40929263的博客
12-12 9823
wx:for wx:for-item wx:for-index wx:for-key
微信小程序wx:for-index 可以指定数组当前下标的变量名。
weixin_46409887的博客
06-07 3581
记录:项目中遇到需要拿到父级的下标来做出数据的一些操作，通过父级的下标拿到子级的数组，并对数组进行改变操作。 例子: 使用 wx:for-index 可以指定数组当前下标的变量名： 优点:通过变量名，子元素可以拿到父级的下标。 拿到父级的下标可以改变父级的数据、来渲染子级数据 <view class="father" wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3,
wx:for
weixin_43663349的博客
04-29 235
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:
【微信小程序】基础篇 -- WXML 模板语法 - 列表渲染 -- wx:for & wx:key（十二）
JMFive的博客
02-28 7422
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第12篇文章;今天开始学习微信小程序的第八天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。不知不觉已经学习微信小程序八天了，估计大佬们一天就学完这些内容了吧，我还在慢吞吞的学完，然后在看官方文档总结写写文章。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。
wx:for的使用，以及自定义item和index
海贼王某人的博客
06-19 3575
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-index
08-30
wx:for-index是一个用于指向当前元素的下标名的属性。它可以在wx:for循环中使用，通过该属性可以获取到当前元素的下标。该下标可以在其他事件中定义自定义事件，并通过e.currentTarget.dataset.xxx获取到该下标的值。通常与wx:for-item和data-xxx一起使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [微信小程序wx:for wx:for-index data-xxx及相关字段说明](https://blog.csdn.net/qq_28670711/article/details/97888130)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [微信小程序wx:for和wx:for-item的用法详解](https://download.csdn.net/download/weixin_38534344/13975545)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

MobMsg

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

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

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

打赏作者

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

抵扣说明：

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

余额充值