Exemple de partage d'affichage de boucle de données JSON de l'applet WeChat

Tout d'abord, il s'agit des données originales, un tableau de json. Cet article présente principalement l'exemple d'une applet WeChat affichant des données json sur l'applet via l'interface API. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil à la

partie HTML

<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}}" est utilisé pour boucler le tableau, et list_data est le nom du tableau wx:for-item="cell" est utilisé pour définir une variable pour chaque élément pendant la boucle

Rappelez-vous : wx:for est un tableau de boucles, wx:for-item consiste à attribuer un alias à la liste

partie js

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 () { }
})

format 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 Le style ici utilise flex, en savoir plus : 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;}

Exécuter les résultats

Articles connexes :

L'applet WeChat affiche les données JSON dans un exemple d'applet via l'interface API

L'applet WeChat pour une explication détaillée de la boucle

Vidéos associées :

Explication détaillée du fichier de configuration globale App.json - Tutoriel vidéo de développement d'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!