今天来讲解下循环输出元素
:
然后我们自己尝试构建一个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的讲解啦,如果大家有什么不懂得,欢迎留言和博主交流