微信小程序for循环，多层嵌套for循环

已于 2022-02-24 15:01:27 修改
阅读量2.2k 收藏 6
点赞数
文章标签： 微信小程序 小程序
于 2022-02-24 14:55:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41733299/article/details/123111834
版权
这篇博客展示了如何在微信小程序中利用WXML和JavaScript处理学院（college）及对应的专业（p_name）数据展示。通过wx:for指令遍历数据，动态生成学院和专业的视图结构，实现内容的灵活布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图：

js：

 console：

 wxml代码：

<view wx:for='{{college}}' wx:for-item="dayItem" wx:key="key" class="user_contnet_box_p jobshow_content_lh">
  <view class="p_box">
    <view class="college">{{dayItem.college_name}}</view>
  </view>
  <view class="dwq" style="display:flex;">
    <view wx:for='{{dayItem.p_name}}' wx:for-item="p_name" wx:key="key" class="professional">
      <view class="p">{{p_name.name}}</view>
    </view>
  </view>
</view>

微信小程序 列表渲染多层嵌套循环
刺心的博客
07-10 2662
/** * 页面的初始数据 */ data: { newslist: [ { time: '今天', list: [ { title: 'EOS主网启动直播', id: '12131', }, { ...
微信小程序 - 循环
m0_52163529的博客
03-21 2677
前端代码编写中，循环的使用是必不可少的，只要有相似内容的列表存在，大概率就会使用到循环，如：商品列表、每月收益、排行榜等。
微信小程序多层循环遍历
weixin_37861326的博客
06-10 1万+
数据：两层嵌套 /** * 页面的初始数据 */ data: { newslist: [ { time: '今天', list: [ { title: 'EOS主网启动直播', id: '12131', }, { ...
微信小程序for循环嵌套
02-01 1312
【代码】微信小程序for循环嵌套。
微信小程序双层/多层 wx:for 循环嵌套，关于内外层的 index 和 item ；data-index 传递两个参数
m0_74132943的博客
06-06 5642
那么关于内外层的 index 下标关系：在默认情况下，这个第二层的循环也是用 index 作为下标；也就是说如果你是在第二层循环中输出 {{index}} 那么这个输出的是第二层的下标值；它的主要作用是告诉小程序每个循环项目的唯一标识符，这样小程序在重新渲染或进行 DOM 操作时可以优化性能。item 也和 index 同理，在不同的循环层中会覆盖不同的 item 值。那么接收到的数据就如下：0是第一层循环的下表，1是第二层循环的下标。的值作为循环项目的唯一标识符，从而在需要重新渲染或更新时提高效率。
微信小程序中页面FOR循环和嵌套循环
08-30
主要介绍了微信小程序中页面FOR循环和嵌套循环的相关资料,需要的朋友可以参考下
【微信开发】微信小程序多层wx:for嵌套的使用
qq_52144300的博客
04-21 7644
微信小程序多层wx:for嵌套的使用
微信小程序wx:for循环嵌套
m0_46245413的博客
06-15 1726
【代码】微信小程序wx:for循环嵌套。
微信小程序多层嵌套循环，二级数组遍历，设置data里面的数据 ...
03-29
一：多层嵌套循环，二级数组遍历 小程序中的遍历循环类似于angularJS的遍历。 二级数组遍历有一个坑。二级遍历wx：for循环的时候，需要注意。（代码如下） JS代码：   data: { groups: [ [ { title: '狼图腾', ...
微信小程序读取服务器多个数组,微信小程序多层嵌套循环，二级数组遍历
weixin_29023445的博客
08-05 2454
小程序中的遍历循环类似于angularJS的遍历。二级数组遍历有一个坑。二级遍历wx：for循环的时候，需要注意。(代码如下)JS代码：data: {groups: [[{title: '狼图腾',cover: '../../img/mineBG.png'},{title: '狼图腾',cover: '../../img/mineBG.png'},],[{title: '狼图腾',cover: '...
微信小程序——多层列表嵌套（遍历多层数组）
battersun的博客
09-10 1万+
前言 我在写小程序的时候，出现一个问题，就是多层列表的嵌套渲染，其中包括wx:for以及wx:key的使用，借此总结下来，一是给自己总结问题，二是希望阔以帮助到大家… 一层循环 JSON代码 { channel: [ { id: 1005000, name: "居家", url: "/pages/category/category?id=1005000", icon...
微信小程序实现跟随菜单效果和循环嵌套加载数据
08-28
主要为大家详细介绍了微信小程序实现跟随菜单效果和循环嵌套加载数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序前端怎么进行嵌套循环，并进行内外层值的比较
weixin_46001736的博客
03-23 1599
微信小程序前端怎么进行嵌套循环，并进行内外层值的比较
for 循环嵌套 for 循环，你需要懂的代码性能优化技巧！
weixin_44421461的博客
04-16 665
点击上方“Java基基”，选择“设为星标”做积极的人，而不是积极废人！每天14:00更新文章，每天掉亿点点头发...源码精品专栏原创 | Java 2021超神之路，很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析网络应用框架 Netty 源码解析消息中间件 RocketMQ 源码解析数据库中间件 Sharding-JDBC 和 MyCAT 源码解析作业调度中间件 Elast...
小程序多层嵌套wx:for循环多个嵌套数组 嵌套循环修改index与item 列表渲染 嵌套for循环 （二维以上循环）
时间在飞飞的博客
05-18 9290
小程序中进行列表循环的时候，如果有嵌套列表循环中，就需要解决默认的index和item 别名的问题 这是我在工作中做的一个品牌筛选列表 其中遇到了要嵌套循环 brandList,进行列表渲染 在小程序中，默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。 这时候就需要用到 wx:for-index 和 wx:for-item 来解决 <view wx:for="{{brandList}}" id="{{'brand_'+e_index}}...
wx:for 微信小程序双重for嵌套如何获取内层的迭代对象
m0_63622279的博客
09-08 1078
思路就是，外层for直接通过默认的item进行迭代，然后内层的for，通过wx:for-item="xxx"的方式指定内部迭代名称。
微信小程序的嵌套循环
acw39194的博客
09-07 323
听说最近微信小程序开发火热，不久前做了一个小程序测试，由于要取日期及下面数据。循环嵌套还是搞了又好一会儿。 下面是代码： 数据： var DateShow=[ [{name:111},{name:666},{name:555},{name:333}], [{name:”fff”},{name:”bjb”},{name:”jknvjdnf”},{name:”hnn”}], [{...
微信小程序--wx:for循环多个嵌套数组
热门推荐
张新丁
03-11 2万+
读取数据，数组下有多个数组： wxml页面上显示： wx:for="{{photo}}" wx:for-item="dayItem" wx:key="{{dayItem.id}}" wx:for="{{dayItem.color}}" wx:key="{{item.colorId}}" 例子： &lt;view class="scroll_box" wx:f
微信小程序wx:for的嵌套
最新发布
02-11
在微信小程序中，`wx:for` 可用于创建列表项的循环渲染。当涉及到更复杂的数据结构时，比如二维数组或多层对象，可以通过嵌套 `wx:for` 来处理这些数据[^1]。 #### 示例代码展示 下面是一个简单的例子，展示了如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

_(:* ｣∠)_alray

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

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

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

打赏作者

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

抵扣说明：

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

余额充值