欢迎光临,了解微信小程序开发,就上易用通!

蓝狐锅锅:微信小程序列表渲染多层嵌套循环及wx:key的使用

发布:2018-03-30 15:55浏览: 来源:网络 作者:cola

前言

入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉。


  1. <view wx:for="{{items}}">
  2. {{index}}: {{item.message}}
  3. </view>

还有一个九九乘法表把数据直接写到wxml里的,并不是动态二维数组的列表渲染。


  1. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  2. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
  3. <view wx:if="{{i <= j}}">
  4. {{i}} * {{j}} = {{i * j}}
  5. </view>
  6. </view>
  7. </view>

那么今天,我们主要来讲讲动态多维数组和对象混合的列表渲染。

蓝狐锅锅:微信小程序列表渲染多层嵌套循环及wx:key的使用(图1)

讲解

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


  1. twoList:[{
  2. id:1,
  3. name:'应季鲜果',
  4. count:1,
  5. twodata:[{
  6. 'id':11,
  7. 'name':'鸡脆骨'
  8. },{
  9. 'id':12,
  10. 'name':'鸡爪'
  11. }]
  12.  




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。