微信小程序双重循环嵌套之角标和对象

小程序关于数据的展示会经常用到双层for循环,这就涉及到获取外循环的角标及对象、获取内循环角标及对象,开始接触的时候用起来比较混乱,在此记录下使用方法

项目中部分截图
在这里插入图片描述
一、代码解析
wordlist:整个大题,里面有两个小题,每个小题有三个选项
因此需要两个for循环,外层循环是显示两个小题,内层循环是显示三个选项

二、用到的小程序语法
其实双层for循环只需要记住两个语法基本就够了

  1. wx:for-item
    这个属性用在外循环,内循环在获取外部循环对象的时候,就用该属性,比如代码中的questionItem可以获取外循环当前的对象,如果想要获取内循环当前的对象就直接用item即可
  2. wx:for-index
    这个属性用在内循环,内循环在获取外部循环角标的时候,就用该属性,比如代码中的itemIndex可以获取内部循环的角标,如果想要获取外循环的角标就直接用index即可

针对代码所述:

  • 外循环对象=questionItem(通过wx:for-item命名)
  • 内循环对象=item (默认是item)
  • 外循环角标=index (默认是index)
  • 内循环角标=itemIndex (通过wx:for-index命名)

综上所述,内外循环的对象和角标都可以通过这俩属性获取

三、关于for循环作用到的标签

<view wx:for=""></view>

<block wx:for=""></block>

开始时这两个方法我是乱用的,不知道有啥区别,后来发现其实是有区别的

//view是一个组件,最终会在页面上渲染的,block只是一个包装元素,不会渲染
//通过审查元素你是找不到这个block的,因此block只能用控制属性,不能设置style之类的
//所以在使用for循环时,尽量用block减少组件的渲染,如果涉及到整体的排版再用view
相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页