uniapp实现分页功能，支持自定义下拉刷新、上拉加载，支持国际化，支持虚拟列表，全自动分页

已于 2022-12-22 22:42:44 修改
阅读量4.2k 收藏 20
点赞数
文章标签： 小程序 vue.js javascript uni-app
于 2021-09-16 09:23:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38836717/article/details/120321932
版权

z-paging

API文档地址：https://z-paging.zxlee.cn

功能&特点

  • 【配置简单】仅需两步（绑定网络请求方法、绑定分页结果数组）轻松完成完整下拉刷新，上拉加载更多功能。
  • 【低耦合，低侵入】分页自动管理。在page中无需处理任何分页相关逻辑，无需在data中定义任何分页相关变量，全由z-paging内部处理。
  • 【超灵活，支持各种类型自定义】支持自定义下拉刷新，自定义上拉加载更多，自带自定义下拉刷新效果，及其他数十种自定义属性。
  • 【功能丰富】支持国际化，支持自定义且自动管理空数据图，支持主题模式切换，支持本地分页，支持聊天分页模式，支持展示最后更新时间，支持吸顶效果，支持内部scroll-view滚动与页面滚动，支持一键滚动到顶部等诸多功能。
  • 【全平台兼容】支持nvue，vue3，支持h5、app及各家小程序。
  • 【高性能】在app-vue、h5、微信小程序、QQ小程序上使用wxs+renderjs从视图层实现下拉刷新；支持虚拟列表，轻松渲染万级数据！

反馈qq群(点击加群)：790460711

关于自动引入组件

z-paging 支持easycom组件规范，无需引用和注册组件即可直接使用，在正在运行的项目中导入z-paging可能会提示：Unknown custom element：<z-paging> - did you register the component corrently?... ，此时需要重新运行项目即可。

预览

自定义下拉刷新效果+分页演示吸顶效果+分页演示
滑动切换选项卡+分页演示聊天记录模式+分页演示

在线demo体验地址：

扫码体验
izxlee
关注
  • 0
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
uni-app框架+vue 实现上拉加载和下拉刷新功能
共同学习，共同成长
07-23 1928
大家好，我是码喽的自我修养！今天给大家分享uni-app框架+vue实现上拉加载和下拉刷新功能！并提供具体代码帮助大家深入理解，彻底掌握！
uni-z-paging:【uni-app自动分页器】超简单！仅需两步轻松完成完整分页逻辑（刷新，上拉加载更多），分页自动处理。支持自定义加载更多的文字或整个视图，自定义拖动刷新样式，自动管理空数据view等
04-01
Z分页 【uni-app自动分页器】超简单，低重组！仅需两步轻松完成完整分页逻辑（翻页刷新，上拉加载更多），分页自动处理。支持自定义加载更多的文字或整个视图，自定义拖放刷新样式，自动管理空数据视图，支持吸顶效果等。 在DCloud插件市场中访问： ://ext.dcloud.net.cn/plugin?name=z-paging 反馈qq群（点击加群）： 平台兼容性 应用程序 5天 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 √ √ √ √ √ √ √ 预览 自定义拖动刷新效果+分页演示 吸顶效果+分页演示 滑动切换选项卡+分页演示 聊天记录模式+分页演示 功能与特点 【配置简单】仅需两步（绑定网络请求方法，绑定分页结果数组）轻松完成完整刷新刷新，上拉加载更多功能。 【低重组，低侵入】在页面中无需处理任何分页相关逻辑，无需在数据中定义任何分页相关变量，全
nui-app 实现下拉刷新、上拉加载更多、页面滚动刷新、一键滚动到顶部等诸多功能
7c
07-26 2708
z-paging是一个uni-app的分页组件。全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等。.........
uniapp 分页组件封装
最新发布
拓的博客
07-26 352
uniapp自定义分页组件
uni-app 实现分页功能
热门推荐
weixin_45830334的博客
03-30 1万+
从Dclould下载的插件 链接:简单实用的分页器 - DCloud 插件市场 <!-- 分页 --> <page-pagination v-show="show" :total="page.total" :showAround="true" :btnText="true" :forceEllipses="true" @change="change"> </page-pagination> data() { return { page: { tot.
uni-app之实现分页
s_156的博客
09-24 3687
一、下载库 官方文档地址为: https://ext.dcloud.net.cn/plugin?id=32 点击下载zip压缩包即可，下载完毕后解压到放置前端相关组件目录,即components目录。 二、使用 1.引入 import uniPagination from '../../components/uni-pagination/uni-pagination/uni-pagination.vue' 2.模板区域使用(在里) <uni-pagination @change="handlePag
小程序(uniapp)-实现分页功能
不想起床
07-28 9014
需求 数据太多，一下加载不过来，所以需要触底再加载数据。数据加载中，提示加载中；数据加载完毕，提示没有数据 大致思路 分页(触发)时机 利用小程序scroll-view 的触底事件。来请求数据 请求来的数据,利用展开运算符，进行数据拼接 […data, …res.data] 每次请求多少条数据，当前页，数据总数要搞明白 数据请求完，加载中消失，显示没有数据 具体实现 初始化变量 触底需要做的事 修改参数 pageNo(当前页) += pageSize(跳过几页) 重新发送请求 rushList
uniapp基于z-paging实现页面下拉刷新、上拉加载，分页加载案例
11-19
在本文中，我们将深入探讨如何使用uniapp与z-paging插件来实现页面的下拉刷新、上拉加载以及分页加载功能。这些是移动应用和Web应用中常见的交互模式，能够提供更好的用户体验，使用户可以轻松地查看和加载更多数据...
Android程序开发之Listview下拉刷新上拉(滑动分页)加载更多
09-02
在实际应用中，为了提供更好的用户体验，我们通常会为Listview添加下拉刷新和上拉加载更多的功能。这两个特性使得用户可以在列表顶部下拉以获取最新数据，在列表底部上拉以加载更多内容，特别是在处理网络数据流时，...
uniapp实现下拉刷新及上拉加载更多的完整代码（app，H5，小程序均可使用）
11-14
内容概要：uniapp实现下拉刷新及上拉加载更多的完整代码（app，H5，小程序均可使用），下载后解压，使用...适应场景：需要使用uniapp开发移动端时，涉及列表数据下拉刷新及上拉加载列表更多数据（分页）的场景。
android Listview下拉刷新 上拉(滑动分页)加载更多
06-05
总之，下拉刷新和上拉加载更多是提升Android应用用户体验的关键特性，通过合理使用开源库和自定义事件监听，可以轻松地在ListView中实现这些功能。开发者可以根据项目需求选择合适的库，或者自定义实现，以满足各种...
uniapp列表分页，上拉加载，下拉刷新
zyl23456的博客
01-19 1536
列表分页
在uniapp中写一个简单的分页功能
qq_45625778的博客
04-10 1059
如果是使用的Vscode编译器，自己百度搜下咋npm，暂时没用到。
uni-app实现分页--（1）准备工作，首页下拉触底加载更多
cozy666的博客
04-10 764
分析：需要在滚动容器中添加滚动触底，在猜你喜欢中获取数据。难点：如何在父页面调用子组件内的方法。父组件中用ref，并定义组件实例类型，子组件中暴露方法。考虑到组件实例会在多处用到，直接早types的component.d.ts中定义。1.在父组件中添加scrolltolower事件，用于调用子组件方法获取数据。3.在子组件中利用defineExpose将方法暴露出去。2.给子组件添加ref属性，并给定义组件实例类型。最后在父组件触底时调用。
uniapp 分页
kly651421907的博客
10-25 321
uniapp分页要用到uniapp自带的一个底部触发事件onReachBottom（） 再触发事件的时候进行请求
uniapp 处理 分页请求
tengyuxin的博客
09-04 1353
虽然表现形式不一样，最基础的分页逻辑是一样。PC端上点击页码来分页，手机端根据滚动到底部，自动增加页码，来请求数据。其次像懒加载和预加载，我个人认为它应该是组件内部该处理的，因为这个性能优化问腿，性能优化问题应该归组件本身，不能混到逻辑开发中，否则写出的代码就会很复杂。
uniapp实现长列表滚动分页功能
weixin_46631078的博客
03-11 959
Empty v-if="itemsList.length==0" :title="'暂无数据 ...'" />console.log("触底了")
uniapp实现分页
weixin_64978272的博客
08-25 636
HBuilder先安装分页插件。
uniapp 触底分页
07-15
在 UniApp 中实现触底分页可以通过以下步骤进行： 1. 在你的页面中定义一个数据列表数组，用于存储分页加载的数据： ```javascript data() { return { dataList: [], // 数据列表数组 pageNo: 1, // 当前页码 pageSize: 10, // 每页数据条数 hasMore: true, // 是否还有更多数据 isLoading: false // 是否正在加载中 }; } ``` 2. 在页面的 `onLoad` 或 `onShow` 生命周期钩子中初始化数据列表，调用数据加载方法： ```javascript onLoad() { this.loadData(); } ``` 3. 实现数据加载方法，根据当前页码和每页数据条数从服务器获取数据并更新 dataList 数组： ```javascript methods: { loadData() { if (this.isLoading || !this.hasMore) { return; // 如果正在加载中或没有更多数据，则不执行加载操作 } this.isLoading = true; // 设置加载状态为 true // 调用接口获取数据，传递当前页码和每页数据条数 api.getDataList(this.pageNo, this.pageSize) .then(res => { if (res.success) { const newDataList = res.data; // 获取到的新数据列表 this.dataList = this.dataList.concat(newDataList); // 将获取到的新数据追加到 dataList 数组中 if (newDataList.length < this.pageSize) { this.hasMore = false; // 如果返回的数据条数小于每页数据条数，则表示没有更多数据了 } else { this.pageNo++; // 更新页码 } } }) .finally(() => { this.isLoading = false; // 加载完成，重置加载状态为 false }); } } ``` 4. 在页面的 `onReachBottom` 事件中触发加载更多数据： ```javascript onReachBottom() { this.loadData(); } ``` 通过以上步骤，你可以实现一个基本的触底分页功能。当页面滚动到底部时，会自动触发 `onReachBottom` 事件，然后调用 `loadData` 方法加载更多数据并更新数据列表。需要根据实际情况调整接口调用和数据处理逻辑。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值