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

最新推荐文章于 2025-03-05 17:22:26 发布

mfxcyh

最新推荐文章于 2025-03-05 17:22:26 发布

阅读量3k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/mfxcyh/article/details/134457134

版权

本文介绍了如何在移动端项目中使用Vant组件实现分页的订单列表加载更多功能，通过Vue的生命周期钩子控制加载状态，并利用axios进行数据请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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)
        }
    })
}