微信小程序 循环展示

样例一 组件递归

项目目录

• index
  • index.js
  • index.json
  • index.wxml
  • index.wxss
• person
  • index.js
  • index.json
  • index.wxml
  • index.wxss

…

效果展示

组件person组件的对外属性
person/index.js

Component({ 
  properties: {
    data:{
      type:Object,
      value:{}
    }
  }, 
})

组件person引用自身
person/index.json

{
  "component": true,
  "usingComponents": {
    "person":"./index"
  }
}

组件person内容展示
person/index.wxml

<view class="name">{{data.name}}</view>
<person wx:if="{{data.children}}" wx:for="{{data.children}}" data="{{item}}" wx:key="unique"></person>

页面index对person组件的引用
index/index.json

{
  "usingComponents": {
    "person":"../person/index"
  }
}

页面index对person组件的调用
index/index.wxml

<!-- 
  新建数据
  也可以在index.js中定义
  这里方便观看
  就直接在页面中
  新建数据
 -->
<wxs module="data">
  module.exports.family = {
    name: "爷爷",
    children: [
      {
        name: "父亲",
        children: [
          {
            name: "我"
          }
        ]
      },
      {
        name: "二叔",
        children: [
          {
            name: "堂弟"
          },
          {
            name: "堂妹"
          }
        ]
      },
      {
        name: "三叔",
        children: [
          {
            name: "堂哥"
          },
          {
            name: "堂姐"
          }
        ]
      },
    ]
  }

</wxs>
<person data="{{data.family}}"></person>

样例二 双层循环

项目目录

• index
  • index.js
  • index.json
  • index.wxml
  • index.wxss

…

展示效果

index/index.wxml

<!-- 
  新建数据
  也可以在index.js中定义
  这里方便观看
  就直接在页面中
  新建数据
 -->
<wxs module="data">
  module.exports.movies = [
    {
      name: "你好，李焕英",
      starringName: [
        "贾玲",
        "张小斐",
        "沈腾",
        "陈赫",
      ],
      typeName: [
        "奇幻",
        "喜剧",
        "家庭"
      ]
    },
    {
      name: "唐人街探案3",
      starringName: [
        "王宝强",
        "刘昊然",
        "妻夫木聪",
        "托尼·贾",
      ],
      typeName: [
        "喜剧",
        "悬疑",
        "动作"
      ]
    }
  ]
</wxs>

<view class="movie-item" wx:for="{{data.movies}}" wx:for-item="movie" wx:for-index="movieIdx" wx:key="unique">
  <view class="index">第{{movieIdx+1}}名</view>
  <view class="name">电影名:{{movie.name}}</view>
  <view class="type">
    电影类型:
    <span wx:for="{{movie.typeName}}">{{index>0?'、':''}}{{item}}</span>
  </view>
  <view class="starring">
    主演:
    <span wx:for="{{movie.starringName}}">{{index>0?'、':''}}{{item}}</span>
  </view>
</view>

优化

⚠ 提高性能优化

添加wx:key="unique"就不会出现黄色警告

Now you can provide attr wx:key for a wx:for to improve performance.

现在，您可以为wx:for提供属性wx:key来提高性能。 —谷歌翻译

<person wx:if="{{data.children}}" wx:for="{{data.children}}" data="{{item}}"  wx:key="unique"></person>