Heim >WeChat-Applet >Mini-Programmentwicklung >Beispiel für die gemeinsame Nutzung einer WeChat-Applet-JSON-Datenschleife
Zuallererst sind dies die Originaldaten, ein JSON-Array. In diesem Artikel wird hauptsächlich das Beispiel des WeChat-Applets vorgestellt, das dem Applet JSON-Daten über die API-Schnittstelle anzeigt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick auf den
HTML-Teil
<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}}“ wird verwendet, um das Array in einer Schleife zu durchlaufen, und list_data ist der Array-Name wx:for-item = „cell“, der verwendet wird, um die Variablen jedes Elements während der Schleife zu definieren
Denken Sie daran: wx:for ist ein Schleifenarray, wx:for-item dient dazu, der Liste einen Alias zuzuweisen
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;}
Ergebnisse ausführen
Verwandte Artikel:
WeChat-Applet über API-Schnittstelle zur Anzeige von JSON-Daten im Beispiel eines Miniprogramms
WeChat-Miniprogramm für Schleife, detaillierte Erklärung
Ähnliche Videos:
Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung einer WeChat-Applet-JSON-Datenschleife. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!