E企盈营销工具技术服务商 热线:4006-838-530

微信小程序循环-小程序循环wx:for循环输出的使用方法

E企盈直播平台营销卖货系统

微信小程序循环-小程序循环wx:for循环输出的使用方法。今天来讲解下循环输出元素,后台存储的数据给事{ 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.jsPage({ /** * 页面的初始数据 */ data: { data:[ { name:”张三” }, { name:”李四” },{ name:”王五” } ], }, /** * 生命周期函数–监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数–监听页面初次渲染完成 */ onReady: function () { },})for.wxml for.wxml 第{{idx}}次输出,姓名:{{item.name}} 讲解:这里的for.js中,data是默认存在的函数,负责保存数据,前台的wxml文件只能调用data中的存在的数据具体的调用方法为双大括号加上数据名for.wxml中需要循环输出,需要将for元素放入block中 ,并填入需要循环输出的数据:这里是data(注:这里的data是js中data中data,大家注意区分下,博主忘了区分)然后data-item 是给data中的子元素添加一个调用的key名,类似于php的foreach,index则是调用的当前元素在数组中的数字下标,大家可以看到输出结果是从零开始的

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序循环-小程序循环wx:for循环输出的使用方法
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏