小程序-循环遍历

1、单层数组的遍历

数据

单层的数据遍历很简单,根据微信小程序文档提供的demo来就行了。
比如循环这组数据,并展示出其中的order_no这个字段:

<view class='item' wx:for="{{list}}" wx:key="{{i}}">//wx:for="{{这里是要循环的数组}}" wx:key={{i}}这个的作用就是给数组唯一的标识。
  <view>{{item.order_no}}</view>//item就是数组的每一项,index就是数组的下标(如果是对象就是对象的属性名)
</view>

2、双层数组循环嵌套

小程序的wx:for列表循环所提供的变量是固定的itemindex 如果是双层循环的话,出现了两个item和两个index,这样子就分不清楚了。需要用到wx:for-itemwx:for-index(自定义下标和值的变量)

image.png

如果内层循环需要用到外层循环的下标:

在第一层循环里使用wx:for-index="自定义的下标变量"

<view class='item' wx:for="{{list}}" wx:key="{{i}}" wx:for-index="Gindex">
  <view wx:for="{{item.contract}}">
    外层的下标:{{Gindex}}
    内层的下标:{{index}}
  </view>
</view>
image.png

如果需要遍历双层数据:

如果要遍历上图数据中的数组每一项中的contract的对象。
在第二层循环里使用wx:for-item="自定义值的变量";

<view class='item' wx:for="{{list}}" wx:key="{{i}}" wx:for-index="Gindex">
  <view wx:for="{{item.contract}}" wx:key="{{i}}" wx:for-item="twodata">
    <view>外层的下标:{{Gindex}}</view>
    <view>内层的数据:{{twodata}}</view>
  </view>
</view>
image.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 9,721评论 0 13
  • 这是16年5月份编辑的一份比较杂乱适合自己观看的学习记录文档,今天18年5月份再次想写文章,发现简书还为我保存起的...
    Jenaral阅读 8,030评论 2 9
  • 熬住,才有后来的一切。
    X半心阅读 1,225评论 0 0
  • 很累吧,自杀与抹黑,一天了,睡着,很难受
    快乐小生活阅读 1,787评论 0 0
  • 如果, 你只是路过, 就请别发出声响, 扰乱鸟儿的歌唱, 别遮住阳光, 墙角的花会很慌张, 别靠近我的窗, 一扇画...
    铭晨的书阅读 1,495评论 0 1

友情链接更多精彩内容