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=&#39;list-head&#39;>列表测试</view>
<view class=&#39;list-box&#39;>
    <view class=&#39;list-li mflex&#39;  wx:for="{{list_data}}"  wx:key="index" >
        <view class=&#39;list-img&#39;><image src=&#39;{{item.imgUrl}}&#39;></image></view>       
        <view  class=&#39;list-tit&#39;><text>{{item.id}}、{{item.title}}</text></view>    
        <view class=&#39;list-con&#39;><text>单价{{item.unitprice}}元/m²</text></view> 
        <view class=&#39;list-adr&#39;><text>{{item.city}}</text></view>    
        <view class=&#39;list-tag&#39;>
            <text class=&#39;tag_{{index}}&#39; 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

js-Teil

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-Format

{
  "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 Dieser Stil verwendet Flex, erfahren Sie mehr: 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;}

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:

Detaillierte Erklärung der globalen Konfigurationsdatei App.json – Video-Tutorial zur WeChat-Applet-Entwicklung

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!