今天來講解下循環輸出元素
后台存儲的數據給事
{
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的講解啦，如果大家有什么不懂得，歡迎留言和博主交流