首先這是原始資料,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即為列表賦別名
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 () { }
}){
"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": "标签七"
}
]
}
]
}.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;}運行結果
# 相關文章：
相關影片：
以上是微信小程式json資料循環展示實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
