微信小程序--wx:for循环多个嵌套数组

最新推荐文章于 2025-02-24 19:42:41 发布

原创最新推荐文章于 2025-02-24 19:42:41 发布 · 2w 阅读

25 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了一个使用WXML在小程序中循环遍历复杂数据结构的例子，展示了如何通过wx:for指令和wx:key属性正确地遍历数组中的数组，并在页面上展示相应的数据。

读取数据，数组下有多个数组：

wxml页面上显示：

wx:for="{{photo}}" wx:for-item="dayItem" wx:key="{{dayItem.id}}"

wx:for="{{dayItem.color}}" wx:key="{{item.colorId}}"

例子：

  <view class="scroll_box" wx:for="{{photo}}" wx:for-item="dayItem" wx:key="{{dayItem.id}}">
    <view class='main'>
      <view class='title'>{{dayItem.chineseName}}
        <text class='subTitle'>{{dayItem.englishName}}</text>
      </view>
        <view class='more'>查看更多
          <image src="image/more.png" mode="widthFix"></image>
        </view>
    </view>
      <view class="item_list" wx:for="{{dayItem.color}}" wx:key="{{item.colorId}}">
          <image src="{{item.image}}" class="item_book_img" mode="widthFix"></image>
          <view class='title'>{{item.title}}</view>
      </view>
  </view>