1、定義數據源 usertradedataList:[],

2、請求數據

getUserTradeDetailList: function () {
      var _this = this
      this.postJsonRequest('/trading/lsdk/api/json', {'data': {
          'merId': 1,
          'currPage': 1,
          'pageSize': 10
        },
        'method': 'trans.list'
      }).then(respond => {
          if (respond.status === 200) {
            if (respond.data.code === 200) {
              console.log('code 200的')
              this.usertradedata = respond.data.result.detailList
              this.usertradedataList = this.usertradedataList.concat(respond.data.result.detailList)

              console.log(this.usertradedata)
            } else {
              console.log('進入else')
              console.log(respond.data.message)
            }
          }
        console.log(respond.code)
        }
      )
    }

循環數組，處理字符串

            var conditionDes = ''
            for(var i=0;i<this.materiallist.length;i++) {
              var model = this.materiallist[i]
              conditionDes = conditionDes + model.attrValue + '、'
            }
            conditionDes = conditionDes.substring(0,conditionDes.length-1)
            this.needmaterial = conditionDes

3、列表繪制，賦值

<div class="transaction-alldetail">
              <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <van-list
                  v-model="loading"
                  :finished="finished"
                  @load="onLoad"
                >
              <div class="transaction-alldetail-items" v-for='(item,index) in usertradedataList'>
                  <div  class="transaction-alldetail-items-left">
                    <img :src="item.imgUrl" alt="">
                    <div>
                        <p class="transaction-expenditure">{{item.desc}}</p>
                        <p class="transaction-time">{{item.time}}</p>
                    </div>
                  </div>
                  <div class="transaction-alldetail-items-right">
                    <p class="transaction-amount">{{item.asset}}</p>
                    <p class="transaction-integration-kind">映豆</p>
                  </div>
              </div>
                </van-list>
              </van-pull-refresh>
            </div>

布局

.transaction-alldetail-items{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 25px 15px;
   color:#666666;
   border-bottom:1px solid #DCDCDC;
 }
 .transaction-alldetail-items-left img{
   width: 50px;
   border-radius: 50%;
 }
 .transaction-alldetail-items-left div{
   display: inline-block;
   vertical-align: top;
   margin-left: 10px;
 }
 .transaction-expenditure{
   font-size: 16px;
   text-align: left;
   margin: 2px 0px 8px;
 }