這篇文章將為大家詳細講解有關微信小程序中json數(shù)據循環(huán)展示的的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司公司2013年成立，是專業(yè)互聯(lián)網技術服務公司，擁有項目網站制作、網站設計網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元尋烏做網站,已為上家服務,為尋烏各地企業(yè)和個人服務,聯(lián)系電話:13518219792

html部分

列表測試

    
               
        {{item.id}}、{{item.title}}    
        單價{{item.unitprice}}元/m2 
        {{item.city}}    
        
            {{cell.tags}}
                  
    

wx:for="{{list_data}}"用來循環(huán)數(shù)組，而list_data即為數(shù)組名wx:for-item="cell" 即用來定義一個循環(huán)過程中每個元素的變量的

謹記：wx:for是循環(huán)數(shù)組，wx:for-item即給列表賦別名

js部分

Page({

  /**
   * 頁面的初始數(shù)據
   */
  data: { },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
onLoad: function (options) { 
    var _this = this
    wx.request({
        url: '自己的數(shù)據地址/list.json',//json數(shù)據地址
        headers: {
            'Content-Type': 'application/json'
        },
        success: function (res) {
            //console.log(res.data.imgListData)
            //console.log(res.data.imgListData[0].tag)
            //將獲取到的json數(shù)據，存在名字叫l(wèi)ist_data的這個數(shù)組中
            _this.setData({
                list_data: res.data.imgListData,
                //res代表success函數(shù)的事件對，data是固定的，imgListData是上面json數(shù)據中imgListData
            })            
        }       
    })    
    
},

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () { },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () { },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () { },

  /**
   * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () { },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  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;}

運行結果

關于“微信小程序中json數(shù)據循環(huán)展示的的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。