微信小程式讀取json資料
阿新 • • 發佈:2019-01-27
該文章為轉載文章
index.wxml
<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>
index.js
Page({ /** * 頁面的初始資料 */ data: {}, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { var _this = this wx.request({ url: 'http://自己的域名cn/index.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 }) } }) } })
index.json
{ "imgListData": [ { "id": "1", "title": "標題描述", "content": "內容描述 ", "city": "詳細地址", "adrs": "上海", "room": "樓房描述", "imgUrl": "https://upload-images.jianshu.io/upload_images/13570975-792453585d7b84af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240", "dataTimes": "時間", "peo": "姓名", "tel": "手機號", "pho": "照片地址", "money": "價格", "unitprice": "單價", "tag": [ { "tags": "標籤一" },{ "tags": "標籤七" },{ "tags": "標籤八" } ] }, { "id": "2", "title": "標題描述", "content": "內容描述 ", "city": "詳細地址", "adrs": "上海", "room": "樓房描述", "imgUrl": "https://upload-images.jianshu.io/upload_images/13570975-792453585d7b84af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240", "dataTimes": "時間", "peo": "姓名", "tel": "手機號", "pho": "照片地址", "money": "價格", "unitprice": "單價", "tag": [ { "tags": "標籤二" },{ "tags": "標籤六" },{ "tags": "標籤七" } ] } ] }
index.wxss
.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資料在伺服器上顯示效果: