vue2用vant的van-pull-refresh实现上拉加载、下拉刷新
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
<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()
})
GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)