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

您所在的位置：网站首页 › 宝马微信小程序怎么用 › 微信小程序：wx:for循环输出的使用方法以及简单例子

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

2024-07-15 20:22| 来源: 网络整理| 查看: 265

今天来讲解下循环输出元素

这里写图片描述

后台存储的数据给事

{ 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

【本文地址】

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

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

今日新闻

推荐新闻