微信小程序> 微信小程序——json数据与wx:for的运用

微信小程序——json数据与wx:for的运用

浏览量:4539 时间: 来源:咸鱼俊

官方的文档如下:

 

之前看了好久,都不明白item是什么意思,然后一直手动使用{{array[0|1|2|3|4].message}}的原始方法将数据绑定起来,后来才知道item只是一个变量名,用来获取array数组里面的元素。

那么结合我的案例,当我们获取的json数据形如:

[{“name”:"小明",“age”:"18",“phone”:"1234"},{“name”:"小红",“age”:"22",“phone”:"4321"},...........{“name”:"小青",“age”:"16",“phone”:"6654"}]

则我们的js文件中的data这么定义即可:

data:{

    personInfo: [{“name”:"小明",“age”:"18",“phone”:"1234"},{“name”:"小红",“age”:"22",“phone”:"4321"},{“name”:"小青",“age”:"16",“phone”:"6654"}]

},

然后加入你的wx.request方法:

wx.request({

    url: '填入你获取json的地址url',

    headers: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' },

    //获取成功

    success: function (res) {

       console.log(res.data);

       that.setData({

              personInfo: res.data

          })

     },

     //获取失败

     fail:function(){

         console.log("数据获取失败");

     },

);

wxml文件:

在父视图容器中加入wx:for={{personInfo}},然后在子控件用{{item.name}}绑定数据即可,例如

view class="parentcontent"  wx:for="{{personInfo}}" wx:key='id'

      view class="content" {{item.name}}/view

      view class="content" {{item.age}}/view

     view class="content" {{item.phone}}/view

/view

这样,就把这json中的小明。小红,... ... 小青等以及他们的name,age,phone等信息数据循环展示出来了。

 

 

 

 

 

 

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎