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

最新推荐文章于 2024-04-25 17:11:22 发布
最新推荐文章于 2024-04-25 17:11:22 发布
阅读量280 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15609303/article/details/102425979
版权

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

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

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

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


9791228-e4f8b68b9c8d62d0.jpg


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

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

9791228-a098c44fe658d8d6.png

2. 在 .js 文件中创建 数组与赋值

9791228-d842101d1fa3ac8c.png


9791228-dd2df8db61fe4947.gif
MobMsg
关注
wx:for wx:for-item wx:for-index wx:for-key
weixin_40929263的博客
12-12 1万+
wx:for wx:for-item wx:for-index wx:for-key
微信小程序中wx:for
最新发布
qq_42931285的博客
08-06 603
微信小程序中wx:for
wx:for、wx:for-item、wx:for-index一看就懂
weixin_50162884的博客
04-25 774
瞬间了解 wx:for、wx:for-item、wx:for-index
小程序：wx:for里面的item，index。以及自定义属性data-xxx的用法（双层循环取下标）。
热门推荐
乐~的博客
07-04 10万+
1.定义通俗来说，wx:for    这个是正常的循环，没什么可说的。wx:for-item=‘变量名（随便起的）’   它是指定循环数据当前的变量名，可以通过  {{变量名.属性}} 展示数组的元素。wx:for-index=‘变量名（随便起）’，它是指向当前元素的下标名，可以在其他事件中定义自定义事件（data-xxx='{{变量名}}'，，该自定义属性可以在参数e下面打印出来）获取该下标。2...
微信小程序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的使用，动态传参
03-29
在小程序的开发过程中，经常会用到在前端页面循环打印一个数组或者对象的数据，这样的话就需要用wx：for来实现。 一般情况下，小程序的utils这个文件夹下，我们可以把本地的数据写进去，封装成.js文件，提供对外暴露...
微信小程序 wx:for的使用实例详解
01-03
微信小程序 wx:for的使用实例详解 在小程序的开发过程中，经常会用到在前端页面循环打印一个数组或者对象的数据，这样的话就需要用wx：for来实现。 一般情况下，小程序的utils这个文件夹下，我们可以把本地的数据写...
wx-drag-sort:微信小程序拖拽排序
05-09
`wx-drag-sort` 是一个专门针对微信小程序设计的拖拽排序库，它利用 JavaScript 技术，使得用户可以通过直观的手势来调整列表元素的顺序。在本文中，我们将深入探讨如何使用 `wx-drag-sort` 实现这一功能，以及涉及...
wx:for
weixin_43663349的博客
04-29 263
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-item 和 wx:for-index
时光の尘的博客
03-08 2426
索引：{{ index }}, 水果名称：{{ fruitItem.name }}
wx:for-item wx:for-index wx:for-key
qq_43235503的博客
11-10 588
wx:for-item wx:for-index wx:for-key
微信小程序wx:for-index 可以指定数组当前下标的变量名。
weixin_46409887的博客
06-07 3605
记录:项目中遇到需要拿到父级的下标来做出数据的一些操作，通过父级的下标拿到子级的数组，并对数组进行改变操作。 例子: 使用 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,
微信小程序 Utils丨wxParse 实现HTML解析、图文混排
全栈工程师
09-30 1108
配置文件 配置文件下载 https://pan.baidu.com/s/1eKZzhWsK3LW0rqrEkNfr0g 配置文件位置 一级目录，与 pages 同级 JS WxParse.wxParse('绑定的数据名', '可以为html或md格式', '具体HTML数据', Page对象也就是this, padding距离); // 初始化 Wx...
【微信小程序】wx:for
sayyy的专栏
09-09 213
前言 调试基础库 2.12.0 开发者工具 1.03.2008270 wx:for 定义数据 Page({ data: { messageList: [{ message: 'foo', }, { message: 'bar' }] } }) <view wx:for="{{messageList}}" wx:for-index="messageIndex" wx:for-item="messageItem" wx:key="message
数组循环wx:for
qq_37194189的博客
02-02 807
wx:for
微信小程序wxfor_wxfor-index_data-xxx字段
TC_DESpipi的博客
08-05 662
小程序wx:for wx:for-index data-xxx
wx:for详解(附wx:key注意事项)
Lawless
07-19 3万+
之前有学过微信小程序的开发，今天看视频有进行了相关学习。之前也有学过Vue,与微信小程序语言有点相像，生命周期感觉都是大同小异。 之前的博客：Vue.js生命周期 Mr.J--Vue之v-for全解析 wx:for定义 官方文档：在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为index，数组当前项的变量...
wx:for的使用，以及自定义item和index
海贼王某人的博客
06-19 3691
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动态传参与数组遍历实践
在微信小程序开发中，"wx:for"指令是一个关键组件，用于在前端页面中动态渲染数组或对象的数据。该指令通常用在WXML模板文件中，通过与data对象中的变量绑定，实现数据的遍历和展示。例如，如下的代码片段展示了如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

MobMsg

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

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

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

打赏作者

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

抵扣说明：

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

余额充值