使用Vant如何实现数据分页,下拉加载

目录

• Vant-ui的van-list实现数据分页加载
• 主要三个属性
• vant上拉加载更多,下拉刷新

Vant-ui的van-list实现数据分页加载

  
  
  
  



  

    
      
{{item}}
    
  

主要三个属性

注意：

• v-model 每次数据加载完成要置为false
• finished 置为false后将不再触发下拉加载
• immediate-check 置为false后，每次进入页面将不会触发load方法，防止进入页面多次加载

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

1.html

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。