vant-ui 中list组件使用

 <!-- 有数据 -->
            <div v-if="yesdata">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div class="yousj" v-for="(item, index) in list" :key="index">
                        <div class="yousjbox">
                            <div class="yousj_img"> 
                                <span>订单号：{{ item.ddbm }}</span>
                            </div>
                            <div class="yousj_wen" :style="{color:getColor(item.zt).color}" v-html="getColor(item.zt).successtatus">
                            </div>
                        </div>
                        <div class="title_bor1"></div>
                        <div class="juedingbiannum">
                            <div>决定书编号：<span>{{ item.jdsbh }}</span></div>
                        </div>
                        <div class="juedingbiannum">
                            <div>处罚单位：<span>{{ item.cljgmc }}</span></div>
                        </div>
                        <div class="juedingbiannum">
                            <div>违法时间：<span>{{ item.wfsj }}</span></div>
                        </div>
                        <div class="fakuannum">
                            <div><span>罚款{{ item.fkje }}元，记{{ item.wfjfs }}分 ，滞纳金{{ item.znj }}元</span>
                            </div>
                        </div>
                        <div class="title_bor2"></div>
                        <div class="juedingbiatime">
                            <div>受理时间：<span>{{ item.clsj }}</span></div>
                        </div>
                        <div class="title_bor2"></div>
                        <!-- 合计 -->
                        <div class="hejibox">
                            <div>合计：<span>￥{{ item.fkje + item.znj }}</span>&nbsp;&nbsp;&nbsp;记<span
                                    class="jifenspan">{{
                                    item.wfjfs == null ? '0' : item.wfjfs
                                    }}&nbsp;</span>分</div>
                        </div>
                    </div>
                </van-list>
            </div>

methods: {
        async getHistory() {
            const res = await addHistory(this.pageNum, this.pageSize)
            if (this.list.length !== res.total) {
                this.yesdata = true
                res.list.map((item) => this.list.push(item));
                this.list.length >= res.total ? (this.finished = true) : (this.finished = false);
                this.loading = false;
            } else {
                this.nodata = true
                this.finished = true
            }
        },
 // 拉底触发
        onLoad() {this.loading = true;
            this.pageNum += 1;
            this.getHistory();
        },
}