### [微信小程序json数据循环展示实例分享](https://www.prosaas.cn/article/17214)

**Published:** 2018-07-26T08:22:39

**Author:** 5201314

**Excerpt:** 首先这是原始数据,json的数组。 这篇文章主要介绍了微信小程序通过api接口将json数据展现到小程序示例，…

首先这是原始数据,json的数组。 这篇文章主要介绍了微信小程序通过api接口将json数据展现到小程序示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 

html部分

<view class='list-head'>列表测试</view>
<view class='list-box'>
    <view class='list-li mflex'  wx:for="{{list\_data}}"  wx:key="index" >
        <view class='list-img'><image src='{{item.imgUrl}}'></image></view>       
        <view  class='list-tit'><text>{{item.id}}、{{item.title}}</text></view>    
        <view class='list-con'><text>单价{{item.unitprice}}元/m²</text></view> 
        <view class='list-adr'><text>{{item.city}}</text></view>    
        <view class='list-tag'>
            <text class='tag\_{{index}}' wx:for="{{item.tag}}" wx:for-item="cell" wx:key="index" >{{cell.tags}}</text>
        </view>          
    </view>
</view>

**wx:for="{{list\_data}}"用来循环数组，而list\_data即为数组名wx:for-item="cell" 即用来定义一个循环过程中每个元素的变量的**

**谨记：wx:for是循环数组，wx:for-item即给列表赋别名**

## js部分

Page({

  /\*\*
   \* 页面的初始数据
   \*/
  data: { },

  /\*\*
   \* 生命周期函数--监听页面加载
   \*/
onLoad: function (options) { 
    var \_this = this
    wx.request({
        url: '自己的数据地址/list.json',//json数据地址
        headers: {
            'Content-Type': 'application/json'
        },
        success: function (res) {
            //console.log(res.data.imgListData)
            //console.log(res.data.imgListData\[0\].tag)
            //将获取到的json数据，存在名字叫list\_data的这个数组中
            \_this.setData({
                list\_data: res.data.imgListData,
                //res代表success函数的事件对，data是固定的，imgListData是上面json数据中imgListData
            })            
        }       
    })    
    
},

  /\*\*
   \* 生命周期函数--监听页面初次渲染完成
   \*/
  onReady: function () { },

  /\*\*
   \* 生命周期函数--监听页面显示
   \*/
  onShow: function () { },

  /\*\*
   \* 生命周期函数--监听页面隐藏
   \*/
  onHide: function () { },

  /\*\*
   \* 生命周期函数--监听页面卸载
   \*/
  onUnload: function () { },

  /\*\*
   \* 页面相关事件处理函数--监听用户下拉动作
   \*/
  onPullDownRefresh: function () { },

  /\*\*
   \* 页面上拉触底事件的处理函数
   \*/
  onReachBottom: function () { },

  /\*\*
   \* 用户点击右上角分享
   \*/
  onShareAppMessage: function () { }
})

## json格式

{
  "imgListData": \[
    {
      "id": "1",
      "title": "标题描述",
      "content": "内容描述 ",
      "city": "详细地址",
      "adrs": "上海",
      "room": "楼房描述",
      "imgUrl": "图片地址",
      "dataTimes": "时间",
      "peo": "姓名",
      "tel": "手机号",
      "pho": "照片地址",
      "money": "价格",
      "unitprice": "单价",
      "tag": \[
        {
          "tags": "标签一"
        },{
          "tags": "标签七"
        },{
          "tags": "标签八"
        }
      \]
    },
    {
      "id": "2",
      "title": "标题描述",
      "content": "内容描述 ",
      "city": "详细地址",
      "adrs": "上海",
      "room": "楼房描述",
      "imgUrl": "图片地址",
      "dataTimes": "时间",
      "peo": "姓名",
      "tel": "手机号",
      "pho": "照片地址",
      "money": "价格",
      "unitprice": "单价",
      "tag": \[
        {
          "tags": "标签二"
        },{
          "tags": "标签六"
        },{
          "tags": "标签七"
        }
      \]
    }
  \]
}

## css 这里样式用了flex，详细了解： http://static.vgee.cn/static/index.html

.mflex {display:flex;}
.list-head{text-align: center;font-size:32rpx;}
.list-li{height:166rpx;padding:40rpx 30rpx;border-bottom:2rpx solid #e4e7ec;flex-wrap:wrap;justify-content:space-between;flex-direction:column;align-items:center;}
.list-img{width:210rpx;height:166rpx;}
.list-img image{display: block;width:210rpx;height:166rpx;}
.list-tit,.list-adr,.list-tag,.list-con{width:calc( 100% - 240rpx );}
.list-tit{font-size:30rpx;color:#1c2627;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;}
.list-con{font-size:24rpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.list-adr{font-size:22rpx;color:#555;text-overflow:ellipsis;white-space:nowrap;overflow:hidden; }
.list-tag{font-size:20rpx;}
.list-tag text{background:#f5ecdf;color:#ff9d00;padding:5rpx;margin-right:10rpx;}
.list-money{font-size:30rpx;color:red;flex:1;text-align: right;font-weight:bold;}
.dizhi{flex:2;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.list-tag text{color:#fff;}
.list-tag .tag\_0{background:#c3dbf3;}
.list-tag .tag\_1{background:#fbd08f}
.list-tag .tag\_2{background:#fdd2d5;}
.list-tag .tag\_3{background:#add2a5;}

运行结果

![](https://img.php.cn//upload/image/441/118/711/1532592880501108.png)

 相关文章：

微信小程序通过api接口将json数据展现到小程序示例

微信小程序 for 循环详解 

相关视频：

App.json全局配置文件详解-微信小程序开发视频教程

以上就是微信小程序json数据循环展示实例分享的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** css, flex, for, html, http, JS, json, Static, 循环, 微信小程序

**Categories:** 后端开发

---