? ? ? ? 在公司項(xiàng)目開(kāi)發(fā)時(shí)，有一個(gè)需求是實(shí)現(xiàn)可以分頁(yè)的訂單列表，由于是移動(dòng)端項(xiàng)目，所以最好的解決方法是做下拉加載更多。

1.在頁(yè)面中使用vant組件

<van-listv-model="loading":finished="finished"finished-text="沒(méi)有更多了"@load="onLoad"
><van-cell v-for="(item,index) in orderList" :key="index" class="orderList" @click="goDetail(item.orderNo)"><div class="order"> </div></van-cell>
</van-list>

2.下拉加載事件

onLoad(){this.loading = true;//分頁(yè)this.pageNum++//請(qǐng)求數(shù)據(jù)this.getList()
},

3.請(qǐng)求數(shù)據(jù)

getList(){let params = {size: 10,current: this.pageNum,}this.$http.post('xxxxxxxx',params).then(res => {if (res.code == 0){this.orderList = this.orderList.concat(res.data.rows)this.loading = falseif (res.data.rows.length < 10){this.finished = true}else{this.finished = false}}else{this.$toast.fail(res.msg)}})
}

4.效果