这篇文章将为大家详细讲解有关微信小程序中json数据循环展示的的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司公司2013年成立，是专业互联网技术服务公司，拥有项目网站制作、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元寻乌做网站,已为上家服务,为寻乌各地企业和个人服务,联系电话:13518219792
html部分
列表测试
{{item.id}}、{{item.title}}
单价{{item.unitprice}}元/m²
{{item.city}}
{{cell.tags}}
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;}运行结果
关于“微信小程序中json数据循环展示的的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
标题名称：微信小程序中json数据循环展示的的示例分析
转载注明：
http://bzwzjz.com/article/jedpih.html
