vant实现列表分页加载和下拉刷新
程序员文章站
2022-03-07 16:11:18
暂无数据
...<template>
<div class="hello">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<div class="container">
<div v-if='noData'>
暂无数据
</div>
<template v-else>
<van-list
v-model="loading"
:finished="finished"
finished-text="- 没有更多了 -"
@load="onLoad"
:offset="130"
>
<div v-for="item in myList" :key="item.id">
{{item.content}}
</div>
</van-list>
</template>
</div>
</van-pull-refresh>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'HelloWorld',
data() {
return {
page: 1,
loading: false, // 当loading为true时，转圈圈
finished: false, // 数据是否请求结束，结束会先显示- 没有更多了 -
myList:[],
noData: false, // 如果没有数据，显示暂无数据
isLoading:false // 下拉的加载图案
}
},
methods: {
getInfo () {
axios.post('/info', {
limit: 10, // 每页请求条数
page: this.page // 请求的页面
})
.then(res => {
// 当请求成功
if (res.code === 0) {
this.loading = false
this.myList = this.myList.concat(res.data)
this.page++
// 如果没有数据，显示暂无数据
if (this.myList.length === 0 && this.page === 1) {
this.noData = true
}
// 如果加载完毕，显示没有更多了
if (res.data.length === 0) {
this.finished = true
}
}
})
.catch(error => {
console.log(error)
});
},
// 列表加载
onLoad () {
setTimeout(() => {
this.getInfo()
this.loading = true
}, 500)
},
onRefresh () {
setTimeout(() => {
// 重新初始化这些属性
this.isLoading = false
this.myList = []
this.page = 1
this.loading = false
this.finished = false
this.noData = false
// 请求信息
this.getInfo()
}, 500)
}
}
}
</script>
本文地址：https://blog.csdn.net/lu6545311/article/details/107855954
上一篇： 使用PHP求最大奇约数的和
下一篇： php实现文件下载(多种文件格式)的代码