微信小程序wx:for wx:for-index data-xxx及相关字段说明
wx:for="{ {list}}" //list为要循环遍历的数组
wx:for-items="{ {list}}" //list为要循环遍历的数组,同for一样
wx:for-item="item" //item作为代表每一项的对象
wx:key="{ {index}}" //作为遍历数组的唯一标识符
wx:for-index="{ {fc}}" //’它是指向当前元素的下标名,可以在其他事件中定义自定义事件(data-xxx={ {fc}},,该自定义属性可以在参数e下面打印出来)获取该下标。所以wx:for-index="{ {变量名}}"和data-xxx={ {变量名}}是搭配在一起使用,最后通过e.currentTarget.dataset.xxx获取到该下标。双重循环如何获取下标请看代码:
<view wx:for-items="{ {master}}" wx:for-item=itemaa wx:for-index=keys wx:key="{ {index}}" > <view>{ {itemaa.section_name}}</view> <view wx:for-items="{ {itemaa.vars}}" wx:key="{ {index}}" wx:for-index=key wx:for-item=item data-index="{ {itemaa}} "> <view> <text>{ {item.key}}</text> <text data-index={ {item}} data-id="{ {key}}" data-ddid="{ {keys}}">{ {item.link}}</text> </view> </view> </view>
用key绑定了里面的数组,并用key来绑定内层数组下标
用keys绑定外层数组,用ddid来绑定下标
最后通过e.currentTarget.dataset.id获取到里面数组(第二层数组)的下标,通过e.currentTarget.dataset.ddid获取到第一层数组的下标。另外因为data-index="{ {item}}",所以可以直接通过e.currentTarget.dataset.index获取内部数组整条item的值。
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
微信网页授权获取用户基本信息