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

小程序关于数据的展示会经常用到双层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
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值