WeChat 애플릿 json 데이터 루프 표시 예시 공유

우선 원본 데이터인 json 배열입니다. 이번 글에서는 API 인터페이스를 통해 json 데이터를 애플릿에 표시하는 WeChat 애플릿의 예를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집기를 따라가서 살펴보겠습니다. #

wx:for="{{list_data}}"는 배열을 반복하는 데 사용되며 list_data는 배열 이름입니다. cell"은 루프의 각 항목을 정의하는 데 사용됩니다. 요소의 변수는

기억하세요: wx:for는 루프입니다. wx:for-item은 목록에 별칭을 할당하는 것입니다#🎜 🎜#

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

#🎜🎜 #json 형식

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

#🎜 🎜#css 여기 스타일은 flex를 사용합니다. 자세한 내용은 http://static.vgee를 참조하세요. cn/static/index.html

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

#🎜 🎜#실행 결과

관련 기사: # 🎜🎜#WeChat 애플릿은 API 인터페이스를 통해 json 데이터를 표시합니다 미니 프로그램 예시

루프 상세 설명을 위한 WeChat 미니 프로그램

관련 동영상:

#🎜 🎜#

App.json 전역 구성 파일에 대한 자세한 설명 - WeChat 애플릿 개발 동영상 튜토리얼

위 내용은 WeChat 애플릿 json 데이터 루프 표시 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!