uniapp开发使用插件z-paging实现页面下拉刷新、上拉加载,分页加载

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

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

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

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

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

 问题解决:删除上面两个属性<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>

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

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
z-paging件可以实现底部更多的功能。通过使用件,您可以在uniapp实现多条数据滚动显示或者自定义下刷新,分页显示等功能。件提供了一个Footer布局文件,您可以在其中添更多的视图元素,例如中的动画和文本提示。当用户滑动到底部时,件会自动触发更多的操作。如果失败,用户可以点击重试按钮重新请求失败的页的数据。您可以在uniapp的官方件市场搜索z-paging件,并参考其接口文档学习如何使用件。\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [JetPack知识点实战系列六:Paging实现更多和下刷新,错误后重新请求](https://blog.csdn.net/lcl130/article/details/108597975)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp开发使用z-paging实现页面刷新、上,分页](https://blog.csdn.net/qq_43799179/article/details/126709149)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值