微信小程序多层循环遍历

最新推荐文章于 2025-06-21 12:53:01 发布

原创最新推荐文章于 2025-06-21 12:53:01 发布 · 1.2w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

9 篇文章

订阅专栏

数据：两层嵌套

  /**
   * 页面的初始数据
   */
  data: {
    newslist: [
      {
        time: '今天',
        list: [
          {
            title: 'EOS主网启动直播',
            id: '12131',
          },
          {
            title: '微信小程序测试呀  测试呀',
            id: '22144',
          },
        ]
      },
      {
        time: '昨天',
        list: [
          {
            title: '框架提供丰富的微信原生AP',
            id: '12324',
          },
          {
            title: '方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等',
            id: '25436',
          },
        ]
      }
    ]
  },

wxml多层循环

<view class="container">
  <view class='mainbox'>
    <view class='newslist' wx:for="{{newslist}}" wx:key="*this" wx:for-item="dayItem">
      <view class='time'>{{dayItem.time}}</view>
      <view class='list' wx:for="{{dayItem.list}}" wx:key="*this" data-id="{{item.id}}" bindtap='linkNews' wx:for-item="item">
        {{item.title}}
      </view>
    </view>
  </view>
</view>

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

wx:key 的值以两种形式提供
1）字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2）保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。