微信小程序的循环

一：简单循环

// demo.wxml

<!--pages/news/index.wxml-->
<view>
  <text>消息页</text>
    <view wx:for="{{arr}}" wx:key="index">
      姓名： {{item.name}}
    </view>
</view>

// demo.js

// pages/news/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr: [
      {
        name: '张三'
      },
      {
        name: '李四'
      }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

二：嵌套循环

// demo.wxml

<!--pages/news/index.wxml-->
<view>
  <text>消息页</text>
    <view wx:for="{{new_data}}" wx:key="index">
      <text>职业：{{item.work_class}}</text>
      <view wx:for="{{item.persons}}" wx:for-item="cell" wx:key="index">
        <text>姓名：{{cell.name}}</text>
        <text>身份：{{cell.work}}</text>
         <view bindtap="onTabItem" data-index="{{index}}">按钮</view>
      </view>
    </view>
</view>

// demo.js

// pages/news/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    new_data: [
      {
        work_class: '文人',
        persons: [
          {
            name: '李白',
            work: '诗人'
          },
          {
            name: '杜甫',
            work: '诗人'
          }
        ],
      },
      {
        work_class: '统治者',
        persons:
        [
          {
            name: '秦始皇',
            work: '始皇帝'
          },
          {
            name: '乾隆',
            work: '清皇帝'
          }

        ]
      }
      
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },
  
   onTabItem: function(e) {
    console.log('点击：', e.currentTarget.dataset.index)
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})