当前位置：首页 > article >正文

使用vant list实现订单列表，支持下拉加载更多

article 2024/11/17 17:45:38

在公司项目开发时，有一个需求是实现可以分页的订单列表，由于是移动端项目，所以最好的解决方法是做下拉加载更多。

1.在页面中使用vant组件

<van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @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;
    //分页
    this.pageNum++
    //请求数据
    this.getList()
},

3.请求数据

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 = false

            if (res.data.rows.length < 10){
              this.finished = true
            }else{
              this.finished = false
            }
        }else{
            this.$toast.fail(res.msg)
        }
    })
}