您当前的位置: 首页 > 知识百科 > 微信小程序多两层循环怎么实现?

微信小程序多两层循环怎么实现?

时间:2023-07-01 14:05 阅读数:63 人阅读 分类:知识百科

  微信小程序多两层循环怎么实现?在接下来的内容中,小编会为大家介绍微信小程序多两层循环实现的过程哦,具体用到哪些微信小程序代码呢?有需要的微信小程序开发者快来学习一下吧!

  微信小程序多两层循环怎么实现?

  目前官方的微信小程序文档里主要是一维小程序数组列表渲染的案例,以下是之微信小程序多两层循环的详细教程了。

  微信小程序多两层循环效果图如下:

  

  微信小程序多两层循环讲解:

  何为多维数组和小程序对象混合,给个很简单的例子

  twoLqwtist:[{

  id:1t,

  name:'应季鲜果',

  courqwnt:1,

  twodfweata:[{

  'id':11,

  'name':'鸡脆骨'

  }qw,{

  'id':12,

  'ntqwame':'鸡爪'

  }]

  },{

  id:2,

  nqetame:'精致糕点',

  coutnwet:6,

  tqtwodata:[{

  'id':13,

  'nqwtame':'羔羊排骨一条'

  },{

  'id':14,

  'name':'微辣'

  }]tqw

  }]

  一层循环

  oneList:[{

  id:1,tq

  name:'应季鲜果',

  counwtwt:1

  },{

  id:2,

  name:'精致糕点',

  cotqwttqwunt:6

  },{

  id:3,

  namqe:'全球美食烘培原料',

  count:12

  },{

  id:4,

  name:'无辣不欢生猛海鲜',

  ctqwount:5

  }]

  以上数组对象混合JSON,是测试只有一层循环的,我们看看在wxml里怎么循环,我们先看一下要循环小程序渲染到页面上的效果图。

  

  {{index+1}}、{{item.name}}

  我们可以看到,这里直接用两个花括号来给view 循环列表,注意强调一下,请记得一下要用 两个花括号数据起来,如果不包起来,view也会循环出来,但并不是自己要循环的数据,而且是给了一个假象给你以为是有循环了,这里开发工具有点坑人的感觉,这个还需要多细心点,这里记住一点,只要是有数据的,就需要花括号。 另外默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,同时我这里也顺道演示了如何使用数组小程序变量名和下标。

  二层小程序循环

  

  JSON微信小程序代码:

  twtqoList:[{

  iqwd:1,

  name:'wer应季鲜果',

  count:1,

  wqettwodata:[{

  'id':11,

  'name':'鸡脆骨'

  },{

  'id':12,

  'ntqwame':'鸡爪'

  }]

  },{

  id:tqw2,

  name:'精致糕点',

  coutqnt:6,

  twodata:[{

  'id':13,

  'naweme':'羔羊排骨一条'

  },{

  'id':14,

  'name':'微辣'

  }]

  },{

  id:3,

  name:'全球美食烘培原料',

  count:12,

  twodata:[{

  'id':15,

  'name':'秋刀鱼'

  },{

  'id':16,

  'name':'锡箔纸金针菇'

  }]

  }]

  微信小程序多两层循环怎么实现?以上是微信小程序多两层循环实现的具体内容了,微信小程序多两层循环实现需要用到的微信小程序代码也为大家整理出了。感谢大家的观看哦,大家请多关注微小乔。

相关推荐:

如何实现微信小程序循环输出?

微信小程序模版怎么应用及简单实例

微信小程序页面跳转方式有哪些?