vant list 组件上拉加载+下拉刷新完整使用

一、图片

1.html

2.js

 

二、文字版，方便复制复用

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">

   <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

        <div v-for="(item, index) in cardList" :key="index" class="li" @click="goCard(item)">

        </div>

   </van-list>

</van-pull-refresh>

data() {

return {

cardList: [], //列表

cardCount: 0, //数据总条数

loading: false, //是否处在加载状态

finished: false, //是否加载完全部数据

refreshing: false, //是否是下拉刷新

page: 1 //分页

}

},

created() {

this.getCardList()

},

 

methods: {

getCardList() { //请求数据

let params = {

page: this.page,

limit: 10

}

this.$http.post('/api/card/myCards', params).then(res => {

if (res.data.code == 1) {

this.cardCount = res.data.data.count //记录总条数

let data = res.data.data.list

this.cardList = this.cardList.concat(data) //将数据加入列表

this.loading = false

if (this.cardList.length >= this.cardCount) { //列表长度大于等于数据总条数

this.finished = true //加载完全部数据

}

} else {

this.$toast(res.data.msg)

}

})

},

onLoad() { //如果下拉刷新，重置列表和分页；否则分页++

if (this.refreshing) {

this.cardList = [] //清空列表数据

this.page = 1 //初始化分页

this.refreshing = false

} else {

this.page++

}

// 初始化列表

this.getCardList()

},

onRefresh() {

this.finished = false

// 重新加载数据

this.loading = true // 将 loading 设置为 true，表示处于加载状态

this.onLoad()

},

}