一、图片
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()
},
}