vue2.0(vant-list)

vant-list

1.list加载多次的坑：记住loading的值是true或false，true不加载，false加载，没有数据请求了finished为true

onLoad() {

      if (!this.loading) return; 需要在上拉加载事件这里做一下判断处理就可以

      this.page++;

      this.orderDetail(); 这里是请求接口的方法

    },

2.list搜索时会无缘无故多加载一次，需要点搜索事件那里把loading改为true（不让他触发list的加载事件），finished改为fasle（就是防止搜索请求之后页面上拉显示没有更多数据啦，明显不对的）

3.list中的卡片组件化，orderCard组件接收父组件的数据，不放任何请求数据（逻辑尽量也不要），父组件负责逻辑请求数据一系列操作（总结：子收父求）

4.{{  a  ||  "没有数据"  }}是后台没有数据时，我们要给一个指定参数显示，防止布局塌陷

5.{{ a | filterTime }}过滤器，方便整洁完美

父组件

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据啦~"
      @load="onLoad"
      offset="100"
    >
      <div class="order-list">
        <span class="order-header"
          >共&nbsp;{{ orderObj.orderNum || 0 }}&nbsp;条明细，共&nbsp;￥{{
            orderObj.orderSum || 0
          }}</span
        >
        <orderCard
          v-for="(item, index) in orderList"
          :item="item"
          :key="index"
        />
      </div>
    </van-list>

orderCard卡片组件化(可直接使用)

<template>
  <div class="order-card">
    <div class="card-left">
      <span class="card-black">{{ item.phone || noPhone }}</span>
      <span class="card-fontsize card-grey">
        <span>升数：{{ item.oilMass || noMass }}</span
        >&nbsp;&nbsp;
        <span>油号：{{ item.oilCode || noCode }}</span>
      </span>
      <span class="card-grey">{{ item.createOrderTime | filterTime }}</span>
    </div>
    <!-- 是否返利（0:否，1:是） -->
    <div class="card-right" v-show="item.isRebate == 0">
      {{ item.label }}
    </div>
    <div class="card-right-two" v-show="item.isRebate == 1">
      <span class="card-right-two-symbol"
        >￥<span class="card-right-two-amount">{{
          item.rebateSum || noMass
        }}</span></span
      >
      <span class="card-right-two-rebate">{{ item.label || noCode }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: Object
  },
  filters: {
    filterTime(e) {
      return e.replace(/-/g, ".");
    }
  },
  data() {
    return {
      noPhone: "",
      noMass: 0,
      noCode: "",
      noDate: ""
    };
  }
};
</script>
<style lang="less" scoped>
.order-card {
  background: #ffffff;
  border-radius: 0.6rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding: 1.5rem;
  height: 9.2rem;
  display: flex;
  justify-content: space-between;
  .card-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .card-black {
      font-size: 1.6rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      height: 2rem;
      line-height: 2rem;
      color: #333333;
    }
    .card-fontsize {
      font-size: 1.2rem;
    }
    .card-grey {
      height: 1.6rem;
      font-size: 1.2rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 1.6rem;
    }
  }
  .card-right {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .card-right-two {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    .card-right-two-rebate {
      width: 100%;
      text-align: right;
      color: #ff7f00;
      font-size: 1.1rem;
    }
    .card-right-two-symbol {
      color: #333333;
      font-size: 1.4rem;
      font-weight: 500;
      .card-right-two-amount {
        font-size: 2.4rem;
      }
    }
  }
}
</style>