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

版权声明:版权所有,禁止转载,违者必究。喜欢的朋友可以关注博主以及点赞评论喔,未来将会持续更新javaweb相关的内容。 您的支持是我更新最大的动力~ https://blog.csdn.net/hxfghgh/article/details/80521890

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

这里写图片描述

这里写图片描述

后台存储的数据给事

{
  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的讲解啦,如果大家有什么不懂得,欢迎留言和博主交流

阅读更多

没有更多推荐了,返回首页