今天来讲解下循环输出元素
后台存储的数据给事
{var local_database = [{date: "Sep 18 2016",post_title:"冬日校花",post_image: "/images/1.jpg",text: "美呀，美呀",view_num: 112,collect_num: 96,turn_num: 515,author_img: "/images/6.jpg",author:"高晴",dateTime:"24小时",detail:"我爱你，爱的如此深沉",postId:0,music:{url: 'http://up.mcyt.net/?down/46993.mp3',title: "雪の華-南條愛乃",coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"},},{date: "Sep 18 2016",post_title: "冬日校花",post_image: "/images/2.jpg",text: "美呀，美呀",view_num: 112,collect_num: 96,turn_num: 515,author_img: "/images/6.jpg",author: "高晴",dateTime: "24小时",detail: "我爱你，爱的如此深沉",postId: 1,music: {url: 'http://mp3.qqmusic.cc/yq/5092537.mp3',title: "爱你-陈芳语",coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"},},{date: "Sep 18 2016",post_title: "冬日校花",post_image: "/images/3.jpg",text: "美呀，美呀",view_num: 112,collect_num: 96,turn_num: 515,author_img: "/images/6.jpg",author: "高晴",dateTime: "24小时",detail: "我爱你，爱的如此深沉",postId: 2,music: {url: 'http://mp3.qqmusic.cc/yq/204586755.mp3',title: "云烟成雨-房东的猫",coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"},},{date: "Sep 18 2016",post_title: "冬日校花",post_image: "/images/4.jpg",text: "美呀，美呀",view_num: 112,collect_num: 96,turn_num: 515,author_img: "/images/6.jpg",author: "高晴",dateTime: "24小时",detail: "我爱你，爱的如此深沉",postId: 3,music: {url: 'http://mp3.qqmusic.cc/yq/213919334.mp3',title: "Your Song-Lady Gaga",coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"},},]module.exports={postList:local_database,}
}
前台使用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的讲解啦，如果大家有什么不懂得，欢迎留言和博主交流
