vant 上拉加载更多，下拉刷新

最新推荐文章于 2024-03-28 09:00:00 发布

村里的大鹅

最新推荐文章于 2024-03-28 09:00:00 发布

阅读量907

点赞数 2

文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_49302285/article/details/125345166

版权

本文展示了如何在Vue中结合van-pull-refresh和van-list组件实现下拉刷新和加载更多的功能。在`onRefresh`和`onLoad`方法中更新数据，通过`isLoading`和`loading`状态控制加载过程。页面初始加载时，`list`数组为空，随着用户滚动和刷新，数据被填充到列表中。同时，`finished`属性用于判断是否已加载所有数据。

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

1.html

   <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              :immediate-check="false"
              finished-text="没有更多了呦"
              @load="onLoad"
            >


         
            </van-list>
          </van-pull-refresh>

2.js

 return {
    
      isLoading: false,
      loading: false,

   
    
      page: 1,
      limit: 10,
      finished: false,
      total: 0, // 总共的数据条数
      List: [],


    }

   getHistory() {
      const historyData = {
        page: this.page,
        limit: this.limit
      }
      return new Promise((resolve, reject) => {
        getHistory(historyData)
          .then(res => {
            if (res.code === 0) {
              console.log(res, '历史记录')
              this.total = res.data.total
              this.finished = !res.data.hasNext
              if (res.data.list && res.data.list.length > 0) {
                const tempList = res.data.list
                // console.log(this.page)
                if (this.page > 1) {
                  this.list = this.list.concat(tempList)
                } else {
                  this.list = tempList // 第一次加载
                }
                this.page += 1
              } else {
                this.list = []
              }
              this.loading = false
              resolve()
            }
          })
          .catch(error => {
            reject(error)
          })
      })
    },



  onLoad() {
      this.getHistory()
    },
    onRefresh() {
      this.page = 1
      setTimeout(() => {
        this.getHistory()
        Toast('刷新成功')
        this.isLoading = false
      }, 1000)
    },