uniapp开发使用插件z-paging实现页面下拉刷新、上拉加载，分页加载-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp开发使用插件z-paging实现页面下拉刷新、上拉加载，分页加载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在uniapp官网有一个比较好用的插件z-paging，可以实现多条数据滚动显示或者自定义下拉刷新，分页显示......在开发消息页面或者app开发需要大量的页面刷新，页面内容过长，减轻服务器的负担就可以使用此插件，进入app智慧加载部分内容，等到再次需要之后的内容就再次加载，方便省事。可以去uniapp的官方插件市场搜索这个插件，下面也有直达链接，可以去它的接口文档学习使用。

插件地址：【z-paging下拉刷新、上拉加载】高性能，全平台兼容。支持虚拟列表，支持nvue、vue3 - DCloud 插件市场

在开发过程中实现下拉刷新最开始在z-paging标签内部添加两个属性：refresher-only 和@refresh

在分页的时候就会出现问题！！！无法分页，底部不会显示没有更多数据的提示。如果使用系统自带的刷新也会存在调用不了的情况，并且直接未进入系统自带的更新方法，也不会停止刷新，不知道存在什么问题。

问题原因：refresh-only属性设置后就会关闭mounted自动请求数据和底部加载数据等功能，局限性非常大

z-paging,uniapp,uniappc插件,uni-app,前端,javascript,scss

问题解决：删除上面两个属性<custom-refresher>标签自定义刷新方法，使用插槽slot，使用自定义方法刷新，数据就可摆脱不自动更新的局限。

完整代码如下：

<z-paging ref="paging" v-model="dataList" @query="getList" auto-show-back-to-top loading-more-enabled >
			<custom-refresher slot="onRefresh" slot-scope="{refresherStatus}" :status="refresherStatus"></custom-refresher>
			<view slot="top">
				<view class="search">
					<u-search v-model="params.keyword" :show-action="false" @search="getList()" margin="0 20rpx">
					</u-search>
				</view>
				<z-tabs ref="tabs" @change="change" :list="listSwiper" :current="current"></z-tabs>
			</view>
			<u-card style="flex: 1;padding: 20rpx;" :id="'id'+index" v-for="(item,index) in dataList" :key="index"
				:title="item.noticeTitle" :sub-title="item.sendTime" margin="20rpx 20rpx" @click="navTo(index)">
				<view slot="body"
					style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 500rpx;">
					{{item.noticeContent}}
				</view>
			</u-card>
		</z-paging>

刷新已经成功，可以自定义，并且分页功能也能实现了。显示效果如图：

z-paging,uniapp,uniappc插件,uni-app,前端,javascript,scss 文章来源地址https://www.toymoban.com/news/detail-667257.html