<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
:distance="150">
<Empty
v-if="!list.length" />
<Table
v-else
:data="list"
:column="column"
:isShowStatus="false" />
</van-list>
</van-pull-refresh>
const pageNum = ref(0)
const pageSize = ref(15)
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const column= ref([])
column.value = [
'11',
'22',
]
const getPageList = (_pageNum = 0) => {
if (_pageNum) {
pageNum.value = _pageNum
}
getData({
sss:'all',
pageNum: _pageNum || pageNum.value,
pageSize: pageSize.value
})
.then(data => {
if (data.list.length == 0) {
// 本次没有数据
if (pageNum.value > 1) {
// 不是第一页,上拉加载
finished.value = true // 数据全部加载完毕
} else {
//第一页,下拉刷新
list.value = []
showFailToast('暂无数据')
refreshing.value = false
}
} else {
if (pageNum.value > 1) {
let _preData = list.value
if (data.list.length) {
let _data = data.list
list.value = [..._preData, ..._data]
} else {
refreshing.value = false
}
} else {
list.value = data.list
refreshing.value = false
}
}
// 更新 loading 和 finished 的状态值
loading.value = false
// 如果数据全部加载完毕,则将 finished 置为 true
if (finished.value) {
showToast('已经没有更多数据了')
}
})
.catch(err => {
showFailToast(err.msg || '请求失败')
})
}
const onRefresh = () => {
// 下拉刷新
finished.value = false // 每次下拉刷新,要将finished置为false
getPageList(1)
console.log('下拉刷新222', finished.value, loading.value)
}
const onLoad = useDebounceFn(() => {
loading.value = true
pageNum.value++
console.log('上拉加载222', finished.value, loading.value)
getPageList()
}, 200)
onMounted(() => {
// getInitData()
})
vue2用vant的van-pull-refresh实现上拉加载、下拉刷新
最新推荐文章于 2024-09-25 16:11:03 发布