您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關微信小程序中json數據循環(huán)展示的的示例分析,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
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}}元/m2</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}}"用來循環(huán)數組,而list_data即為數組名wx:for-item="cell" 即用來定義一個循環(huán)過程中每個元素的變量的
謹記:wx:for是循環(huán)數組,wx:for-item即給列表賦別名
Page({ /** * 頁面的初始數據 */ data: { }, /** * 生命周期函數--監(jiān)聽頁面加載 */ 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數據,存在名字叫l(wèi)ist_data的這個數組中 _this.setData({ list_data: res.data.imgListData, //res代表success函數的事件對,data是固定的,imgListData是上面json數據中imgListData }) } }) }, /** * 生命周期函數--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監(jiān)聽用戶下拉動作 */ 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數據循環(huán)展示的的示例分析”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。