微信小程序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全局配置文件详解-微信小程序开发视频教程

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