首先这是原始数据,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;}运行结果
相关文章：
微信小程序通过api接口将json数据展现到小程序示例
微信小程序 for 循环详解
相关视频：
App.json全局配置文件详解-微信小程序开发视频教程
