小程序:wx:for里面的item,index。以及自定义属性data-xxx的用法(双层循环取下标
封面图
•
2025-12-28
•
小程序
271
0
0
0
在微信小程序中,`<wx:for>` 是用于循环渲染列表的指令。它支持 `item` 和 `index` 两个变量来分别表示当前项和索引。此外,还可以通过 `data-xxx` 自定义属性传递数据到事件处理函数中。 --- ## 一、基本用法:`wx:for` 中的 `item` 和 `index` ### 1. 单层循环 ```html <view wx:for="{{list}}" wx:key="index"> {{index}}: {{item.name}} </view> ``` - `{{list}}` 是一个数组(例如:`[ { name: 'A' }, { name: 'B' } ]`) - `item` 表示当前项(如 `{ name: 'A' }`) - `index` 表示当前项的索引(从 0 开始) ### 2. 自定义 `item` 和 `index` 名称 ```html <view wx:for="{{list}}" wx:for-item="myItem" wx:for-index="myIndex" wx:key="index"> {{myIndex}}: {{myItem.name}} </view> ``` --- ## 二、`data-xxx` 的用法 `data-xxx` 是用于向事件处理函数传递自定义数据的。通常用于点击事件中传递当前项的信息。 ### 示例: ```html <view wx:for="{{list}}" wx:key="index" bindtap="handleTap" data-name="{{item.name}}" data-index="{{index}}"> {{item.name}} </view> ``` 在 JS 中: ```javascript Page({ data: { list: [ { name: 'Apple' }, { name: 'Banana' }, { name: 'Orange' } ] }, handleTap(e) { console.log('name:', e.currentTarget.dataset.name); console.log('index:', e.currentTarget.dataset.index); } }) ``` --- ## 三、双层循环取下标(外层 index + 内层 index) 假设你有一个二维数组,比如: ```javascript data: { list: [ [ 'A1', 'A2', 'A3' ], [ 'B1', 'B2', 'B3' ], [ 'C1', 'C2', 'C3' ] ] } ``` ### 1. 外层循环 + 内层循环 ```html <view wx:for="{{list}}" wx:key="index" wx:for-item="outerItem" wx:for-index="outerIndex"> <view wx:for="{{outerItem}}" wx:key="index" wx:for-item="innerItem" wx:for-index="innerIndex"> 外层索引: {{outerIndex}}, 内层索引: {{innerIndex}} - 值: {{innerItem}} </view> </view> ``` ### 2. 使用 `data-xxx` 传递双层索引 ```html <view wx:for="{{list}}" wx:key="index" wx:for-item="outerItem" wx:for-index="outerIndex"> <view wx:for="{{outerItem}}" wx:key="index" wx:for-item="innerItem" wx:for-index="innerIndex" bindtap="handleInnerTap" data-outer-index="{{outerIndex}}" data-inner-index="{{innerIndex}}"> {{innerItem}} </view> </view> ``` JS 中: ```javascript handleInnerTap(e) { const outerIndex = e.currentTarget.dataset.outerIndex; const innerIndex = e.currentTarget.dataset.innerIndex; console.log('外层索引:', outerIndex, '内层索引:', innerIndex); } ``` --- ## 四、注意事项 1. **`wx:key` 必须指定**,否则可能会出现渲染错误。 2. 如果是数组中的对象,建议使用唯一 ID 作为 key,而不是 `index`。 3. `data-xxx` 只能是字符串,如果需要传递数字或对象,可以转换成 JSON 字符串。 --- ## 五、完整示例代码 ### WXML: ```html <view wx:for="{{list}}" wx:key="index" wx:for-item="outerItem" wx:for-index="outerIndex"> <view wx:for="{{outerItem}}" wx:key="index" wx:for-item="innerItem" wx:for-index="innerIndex" bindtap="handleInnerTap" data-outer-index="{{outerIndex}}" data-inner-index="{{innerIndex}}"> {{innerItem}} </view> </view> ``` ### JS: ```javascript Page({ data: { list: [ ['A1', 'A2', 'A3'], ['B1', 'B2', 'B3'], ['C1', 'C2', 'C3'] ] }, handleInnerTap(e) { const outerIndex = e.currentTarget.dataset.outerIndex; const innerIndex = e.currentTarget.dataset.innerIndex; console.log(`外层索引: ${outerIndex}, 内层索引: ${innerIndex}`); } }) ``` --- 如果你有更具体的场景或代码问题,欢迎继续提问!
上一篇:
微信小程序--GETLOCATION需要在APP.JSON中声明PERMISSION字段
下一篇:
微信小程序跳转到其他网页(外部链接)
标题录入,一次不能超过6条
留言
评论