关于微信小程序二级嵌套循环和三级嵌套循环小demo

最新推荐文章于 2024-06-02 08:00:00 发布
最新推荐文章于 2024-06-02 08:00:00 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43459224/article/details/95371139
版权

仅作记忆使用！结构相似！
先是三级嵌套：

<!-- 三级嵌套循环 -->
        <view class='history' wx:for="{{historylist}}" wx:key="{{index}}">
          <view class='section-focus' >
            <image class='focus-img' src="{{item.img}}"></image>
            <text class='focus-title'>{{item.title}}</text>
          </view>
          <!-- 历史列表 -->
          <view class='recommend-list'>
            <view class='news-card' wx:for="{{item.contentlist}}" wx:for-item="cell" wx:key="index">
              <navigator open-type="navigate" class='three'>
                <view class='news-info'>
                  <view class='title'>{{cell.title}}</view>
                  <!-- 嵌套循环 第二个循环自定义一个cell -->
                  <view class='detail'>
                    <text class='subdetail' wx:for="{{cell.subcontentlist}}" wx:for-item="subcell" wx:key="index">{{subcell.datas}}</text>
                  </view>
                </view>
                <view class='news-pic'>
                  <image class='news-pic-smimg' src='{{cell.smimg}}'></image>
                </view>
              </navigator>
            </view>
          </view>

        </view>

然后二级：

<!-- 三级嵌套循环 -->
        <view class='history' wx:for="{{historylist}}" wx:key="{{index}}">
          <view class='section-focus' >
            <image class='focus-img' src="{{item.img}}"></image>
            <text class='focus-title'>{{item.title}}</text>
          </view>
          <!-- 历史列表 -->
          <view class='recommend-list'>
            <view class='news-card' wx:for="{{item.contentlist}}" wx:for-item="cell" wx:key="index">
              <navigator open-type="navigate" class='three'>
                <view class='news-info'>
                  <view class='title'>{{cell.title}}</view>
                </view>
                <view class='news-pic'>
                  <image class='news-pic-smimg' src='{{cell.smimg}}'></image>
                </view>
              </navigator>
            </view>
          </view>

        </view>
avoidaily
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发之嵌套循环
qq_41588568的博客
09-16 1311
要实现这样的效果，因为我会员的等级信息是在一个数组里边，而商品信息是在另一个数组里边，他们之间通过会员id进行联系（即通过会员等级id可以请求到该等级下对应的商品信息）。 数据结构： 会员等级数据： 商品数据： 我想渲染到页面的话，就必须构造出一个数组，数组的结构如下： 我的具体实现： wxml部分： ...
微信小程序双层/多层 wx:for 循环嵌套，关于内外层的 index 和 item ；data-index 传递两个参数
最新发布
m0_74132943的博客
06-06 1445
那么关于内外层的 index 下标关系：在默认情况下，这个第二层的循环也是用 index 作为下标；也就是说如果你是在第二层循环中输出 {{index}} 那么这个输出的是第二层的下标值；它的主要作用是告诉小程序每个循环项目的唯一标识符，这样小程序在重新渲染或进行 DOM 操作时可以优化性能。item 也和 index 同理，在不同的循环层中会覆盖不同的 item 值。那么接收到的数据就如下：0是第一层循环的下表，1是第二层循环的下标。的值作为循环项目的唯一标识符，从而在需要重新渲染或更新时提高效率。
【微信开发】微信小程序多层wx:for嵌套的使用
weixin_62980497的博客
06-02 192
叫i不会很low吗？wx:key : 在这个例子中并不能体现出它的重要性，举一个其他的例子: 假如有一个需求，在使用wx:for 建立列表的同时，每一个item中都配有一个input输入框，我还有一个按钮，这个按钮点击后，列表再加入一个item（也有input输入框），并且每次都在列表前面加入（在原数组上使用unshift插入），不难想象，这时列表原先顺序会被打破，如果恰好某一个input框中有内容，那么这个input框并不跟随item位移(如下图)。
微信小程序的嵌套循环
可口可乐哟的博客
11-07 1224
微信小程序的嵌套循环 听说最近微信小程序开发火热，不久前做了一个小程序测试，由于要取日期及下面数据。循环嵌套还是搞了又好一会儿。 下面是代码： 数据： var DateShow=[ [{name:111},{name:666},{name:555},{name:333}], [{name:”fff”},{name:”bjb”},{name:”jknvjdnf”},{name:”hnn”}], ...
微信小程序for循环嵌套
曲江涛的博客
02-01 1033
【代码】微信小程序for循环嵌套。
微信小程序前端怎么进行嵌套循环，并进行内外层值的比较
weixin_46001736的博客
03-23 1391
微信小程序前端怎么进行嵌套循环，并进行内外层值的比较
微信小程序wx:for循环嵌套
m0_46245413的博客
06-15 1603
【代码】微信小程序wx:for循环嵌套。
小程序丨嵌套循环
weixin_30649641的博客
02-27 99
<view wx:for="{{productList}}" wx:key="{{xxx}}"> <view> {{index+1}}、{{item.name}} </view> <!--二次嵌套循环--> <view wx:for="{{item.details}}" wx...
微信小程序 列表渲染多层嵌套循环
热门推荐
yechaoa
08-09 2万+
前言 入门教程之列表渲染多层嵌套循环，目前官方的文档里，主要是一维数组列表渲染的案例，还是比较简单单一，给刚入门的童鞋还是无从入手的感觉。 &lt;view wx:for="{{items}}"&gt; {{index}}: {{item.message}} &lt;/view&gt; 还有一个九九乘法表把数据直接写到wxml里的，并不是动态二维数组的列表渲染。 &lt;vie...
微信小程序中页面FOR循环和嵌套循环
12-29
微信小程序中页面FOR循环和嵌套循环 单个循环 <view wx:for={{pinpaiTishi}} wx:key={{xxx}}> <view wx:if={{item.name! wx:key={{xxxx}}> //判断name是否为null <view class=tr> <view class=td-left></view> <view class=td-right> <view bindtap=oncli
第一次写微信小程序嵌套循环蠢蠢的失误
qq_35056468的博客
07-22 216
今天第一次正式写小程序， 然后被自己蠢死。 我拿到的需求是 在微信小程序上使用索引栏，渲染用户列表，简单的不能再简单的需求了。 然而我却在 写嵌套循环的时候，被自己蠢到了 下面是我写的嵌套循环： <van-index-bar wx:if="{{!isSearch}}"> <view wx:for="{{ userList }}" wx:key="firstLetter"> <van-index-anchor index="{{item.fir
微信小程序-------（3）（wx：for 循环）
ydw247424的博客
12-27 575
1.wx：for 使用 实例： 代码： <!--列表循环 wx:for --> <view> <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index"> <!-- wx:for="{{list}}" 循环列表，在{{}}中写入自己定义的列表名称 --> <!-- wx:...
微信小程序三层嵌套循环
不想当前端的文案不是好导游
07-01 1200
微信小程序三层嵌套循环 ！！三级嵌套必须在二级里面 ！！多层嵌套举一反三 效果图 wxml <view wx:for="{{list}}" wx:for-item="list" wx:key="id"> <view class="first">一层循环：{{list.first}}</view> <view wx:for="{{list.children}}" wx:for-item="children" wx:key="id"> <
组件navigator嵌套问题？
weixin_34185364的博客
12-14 667
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序多层循环
1
07-27 948
从后台拿到的数据结构: list: [{ region_name: '3号楼', subs: [{ region_name: '一层', subs: [{ daytime:{ status:false, executor:'李姐' }, region_name:'手术室', subs:[] },{
微信小程序多层嵌套循环，三级数组遍历
weixin_34402090的博客
10-26 3237
数据：三层嵌套 index.wxml 页面 <!-- 菜单标签 --> <view class='menu_label'> <view class='label_ul'> <view wx:for="{{ menuList }}" wx:key='' class="{{ l...
小程序中两层wx:for 第二层如何获得第一层的for循环的index值
Z_PTOPONE的博客
02-22 2588
在项目中，需要使用第二层for循环中的index值，那么如何拿到第一层for循环的index值？ 其实很简单，我们只需要在第一层for循环中使用wx:for-index=“变量名称” 然后在第二层for循环中使用这个变量就可以了，这个变量就是第一层for循环的index值 注意一点，wx:key=“index” 这个虽说也是index，也是从0开始，但你无法在第二层for循环中使用index这个变量，wx:key 与 wx:for-index 要注意区分 ...
微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用
大新软件老杨
01-02 2142
前言 入门教程之列表渲染多层嵌套循环，目前官方的文档里，主要是一维数组列表渲染的案例，还是比较简单单一，给刚入门的童鞋还是无从入手的感觉。 view wx:for="{{items}}"> {{index}}: {{item.message}} view> 还有一个九九乘法表把数据直接写到wxml里的，并不是动态二维数组的列表渲染。 view wx:for="{{[1, 2,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值