微信小程序：wx:for循环输出的使用方法以及简单例子

今天来讲解下循环输出元素

：

然后我们自己尝试构建一个for循环输出的小程序

app.js以及app.json app.wxss页面的构造就不放出来了，不会的童鞋可以看博主的第一个小程序文章

初步构造完成如下：

下面是for.js的构造：

// pages/for/for.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    data:[
      {
        name:"张三"
      },
      {
        name:"李四"
      },{
        name:"王五"
      }

    ],
  },

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

  },

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

  },


})

for.wxml

<block wx:for="{{data}}" data-item="item" wx:for-index="idx" >
  <view>
    第{{idx}}次输出,姓名：{{item.name}}
  </view>
</block>

讲解：

这里的for.js中,data是默认存在的函数，负责保存数据，前台的wxml文件只能调用data中的存在的数据
具体的调用方法为双大括号加上数据名

for.wxml中
需要循环输出，需要将for元素放入block中 ，并填入需要循环输出的数据：这里是data(注：这里的data是js中data中data，大家注意区分下，博主忘了区分)

然后data-item 是给data中的子元素添加一个调用的key名，类似于php的foreach，index则是调用的当前元素在数组中的数字下标，大家可以看到输出结果是从零开始的

以上就是for的讲解啦，如果大家有什么不懂得，欢迎留言和博主交流