WeChat applet json data loop display example sharing-Mini Program Development-php.cn

WeChat applet json data loop display example sharing

php是最好的语言

Release： 2018-07-26 16:22:39

Original

5203 people have browsed it

First of all, this is the original data, an array of json. This article mainly introduces the example of WeChat applet displaying json data to the applet through the API interface. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look at

html part

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

Copy after login

wx:for ="{{list_data}}" is used to loop the array, and list_data is the array name wx:for-item="cell" which is used to define a variable for each element during the loop

Remember: wx:for is a loop array, wx:for-item is to assign an alias to the list

js part

Page({

  /**
   * 页面的初始数据
   */
  data: { },

  /**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) { 
    var _this = this
    wx.request({
        url: &#39;自己的数据地址/list.json&#39;,//json数据地址
        headers: {
            &#39;Content-Type&#39;: &#39;application/json&#39;
        },
        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 () { }
})

Copy after login

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": "标签七"
        }
      ]
    }
  ]
}

Copy after login

css The style here uses flex, learn more: 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;}

Copy after login

Running results

WeChat applet json data loop display example sharing