【Uniapp-Vue3】z-paging插件组件实现触底和下拉加载数据

一、下载z-paing插件

注意下载下载量最多的这个

进入Hbuilder以后点击"确定"

插件的官方文档地址:

https://z-paging.zxlee.cn

二、z-paging插件的使用

在文档中向下滑动,会有使用方法。

使用z-paging标签将所有的内容包起来

配置标签中的属性

在script标签中进行配置:

  1. 声明paging

  2. 在queryList函数中调用获取数据函数,并传入两个参数

  3. 在获取数据函数中限制获取数据的范围

  4. 使用paging去接受获取的 数据

  5. try catch去处理数据获取错误

当我们的数据列表中添加了新的数据的时候,刷新方式也会改变,要使用reload方法进行刷新

相关推荐
^Rocky几秒前
uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)
uni-app·腾讯云·媒体
娃哈哈哈哈呀几秒前
html-pre标签
java·前端·html
$程2 分钟前
Uniapp 二维码生成与解析完整教程
前端·uni-app
Java永无止境3 分钟前
Web前端基础:HTML-CSS
java·前端·css·html·javaweb
tryCbest7 分钟前
UniApp系列
uni-app·web
安全系统学习21 分钟前
网络安全逆向分析之rust逆向技巧
前端·算法·安全·web安全·网络安全·中间件
花开月满西楼22 分钟前
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!
android·前端·android studio
KENYCHEN奉孝24 分钟前
基于 actix-web 框架的简单 demo
前端·rust
wordbaby37 分钟前
🎯 satisfies 关键字详解(TypeScript)
前端·typescript
超级土豆粉1 小时前
CSS 性能优化
前端·css·性能优化