美文网首页
h5请求列表并赋值

h5请求列表并赋值

作者: 艾希_可可 | 来源:发表于2018-11-20 17:36 被阅读13次

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

    相关文章

      网友评论

          本文标题:h5请求列表并赋值

          本文链接:https://www.haomeiwen.com/subject/ycbxqqtx.html