微信小程序 wx:for 循环的嵌套层动态生成的多个view绑定点击事件
时间: 2024-03-18 12:39:11 浏览: 95
摩拜单车微信小程序开发技术总结
可以在 wx:for 循环中使用 data-* 属性绑定数据,在绑定的 view 上使用 bindtap 事件绑定点击事件,具体代码如下:
```html
<view wx:for="{{outerList}}" wx:key="index">
<view wx:for="{{item.innerList}}" wx:key="index" data-outer-index="{{index}}">
<view data-inner-index="{{index}}" bindtap="handleTap">{{item.text}}</view>
</view>
</view>
```
在上面的代码中,我们为外层的 view 绑定了一个 wx:for 循环,内层的 view 也绑定了一个 wx:for 循环。在内层的 view 上,我们使用 data-outer-index 属性绑定了外层循环的索引,使用 data-inner-index 属性绑定了内层循环的索引。在最内层的 view 上,我们使用 bindtap 事件绑定了点击事件,并且在事件处理函数中可以使用 event.currentTarget.dataset.outerIndex 和 event.currentTarget.dataset.innerIndex 获取到外层循环和内层循环的索引。事件处理函数的代码如下:
```javascript
handleTap(event) {
const outerIndex = event.currentTarget.dataset.outerIndex;
const innerIndex = event.currentTarget.dataset.innerIndex;
console.log('outerIndex:', outerIndex, 'innerIndex:', innerIndex);
}
```
在事件处理函数中,我们可以根据索引获取到对应的数据,并进行相应的业务处理。
阅读全文