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" >共 {{ orderObj.orderNum || 0 }} 条明细，共 ￥{{ 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 > <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>