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

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

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

今天来讲解下循环输出元素后台存储的数据给事{  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.wxmlblock 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的讲解啦,如果大家有什么不懂得,欢迎留言和博主交流

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

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏