【uni-app】1、分页组件z-paging介绍与使用

news2024/12/24 10:40:58

1、z-paging 介绍

1、一个 uni-app (opens new window)分页组件。
2、全平台兼容,支持自定义下拉刷新、上拉加载更多,支持虚拟列表,支持自动管理空数据图、点击返回顶部,支持聊天分页、本地分页,支持展示最后更新时间,支持国际化等等。

2、z-paging 文档地址

https://z-paging.zxlee.cn/start/intro.html

3、功能&特点

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

4、效果演示

演示地址:z-paging演示地址

https://demo.z-paging.zxlee.cn/#/

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

5、z-paging 引入

  1. 通过插件市场安装

在插件市场搜索 z-paging,或点击链接【z-paging下拉刷新、上拉加载】高性能,全平台兼容。支持虚拟列表,支持nvue、vue3

在这里插入图片描述

点击 【下载插件并导入HBuilderX】,便会在 HBuilderX 中提示 【选择目标项目并导入】,选择你的项目进行导入即可

更新插件,z-paging 使用uni_modules管理,导入的项目会在uni_modules目录下,在uni_modules下右键z-paging可以快速地从插件市场更新

在这里插入图片描述

  1. 通过npm安装

为多端兼容考虑,建议优先从插件市场 (opens new window)获取插件

//若项目之前未使用npm管理依赖(项目根目录下无package.json文件),先在项目根目录执行命令初始化npm工程
npm init -y

//安装
npm install z-paging --save
//更新
npm update z-paging
  • 注意

(v2.4.6之前)使用npm方式安装编译会提示WARNING: Module not found: Error: Can’t resolve’ @/uni_modules/z-paging’
此警告不影响正常使用,若需要消除此警告,请至源码的z-paging-utils.js文件中,按照注释提示注释相关代码。

在pages.json中配置easycom

"easycom": {
	"custom": {
	    "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue"
	}
}

在vue.config.js(没有这个文件则在项目根目录下创建)中添加配置

module.exports = {
	transpileDependencies: ['z-paging']
}

6、z-paging 使用

  • 基本使用
  • 在中使用@query绑定js中分页请求的方法(z-paging会将计算好的pageNo和pageSize两个参数传递到此方法中),然后通过v-model绑定列表for循环的list。
  • 在请求结果回调中,通过调用z-paging的complete()方法,将请求返回的数组传递给z-paging处理,如:this. r e f s . p a g i n g . c o m p l e t e ( 服务器返回的数组 ) ; ;若请求失败,调用: t h i s . refs.paging.complete(服务器返回的数组);;若请求失败,调用:this. refs.paging.complete(服务器返回的数组);;若请求失败,调用:this.refs.paging.complete(false);即可。
  • 当tab切换或搜索时,可以通过this.$refs.paging.reload()刷新整个列表。
  • 在nvue中,z-paging中插入的列表item(z-paging的直接子view)必须是cell,必须使用cell包住,因为在nvue中,z-paging使用的是nvue的list组件,具体请查阅demo中的common-demo-n.vue示例。
<template>
    <view class="content">
        <z-paging ref="paging" v-model="dataList" @query="queryList">
            <view class="item" v-for="(item,index) in dataList">
                <view class="item-title">{{item.title}}</view>
            </view>
        </z-paging>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataList: []
            };
        },
        methods: {
            queryList(pageNo, pageSize) {
              	//这里的pageNo和pageSize会自动计算好,直接传给服务器即可
              	//这里的请求只是演示,请替换成自己的项目的网络请求,并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
                this.$request.queryList({ pageNo,pageSize }).then(res => {
                	//请勿在网络请求回调中给dataList赋值!!只需要调用complete就可以了
                	this.$refs.paging.complete(res.data.list);
                }).catch(res => {
                	//如果请求失败写this.$refs.paging.complete(false),会自动展示错误页面
                	//注意,每次都需要在catch中写这句话很麻烦,z-paging提供了方案可以全局统一处理
                	//在底层的网络请求抛出异常时,写uni.$emit('z-paging-error-emit');即可
                	this.$refs.paging.complete(false);
                })
            }
        },
    };
</script>

<style scoped>
    
</style>
  • 设置自定义emptyView组件示例
  • 设置自定义emptyView组件,非必须。空数据时会自动展示空数据组件,不需要自己处理
<z-paging ref="paging" v-model="dataList" @query="queryList">
    <!-- 设置自己的emptyView组件,非必须。空数据时会自动展示空数据组件,不需要自己处理 -->
    <empty-view slot="empty"></empty-view>
    <view class="item" v-for="(item,index) in dataList" :key="index">
        <view class="item-title">{{item.title}}</view>
    </view>
</z-paging>
  • 自定义加载更多各个状态的描述文字示例
  • 以修改【没有更多了】状态描述文字为例(将默认的"没有更多了"修改为"我也是有底线的!")
<z-paging ref="paging" v-model="dataList" loading-more-no-more-text="我也是有底线的!" @query="queryList">
    <!-- 设置自己的emptyView组件,非必须。空数据时会自动展示空数据组件,不需要自己处理 -->
    <view class="item" v-for="(item,index) in dataList" :key="index">
        <view class="item-title">{{item.title}}</view>
    </view>
</z-paging>
  • 自定义下拉刷新view示例
  • use-custom-refresher需要设置为true(默认为true),此时将不会使用uni自带的下拉刷新,转为使用z-paging自定义的下拉刷新,通过slot可以插入开发者自定义的下拉刷新view。
<z-paging ref="paging" v-model="dataList" @query="queryList">
    <!-- 自定义下拉刷新view -->
    <!-- 注意注意注意!!QQ小程序或字节跳动小程序中自定义下拉刷新不支持slot-scope,将导致custom-refresher无法显示 -->
    <!-- 如果是QQ小程序或字节跳动小程序,请参照demo中的sticky-demo.vue中的写法,此处使用slot-scope是为了减少data中无关变量声明,降低依赖 -->
    <custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus"></custom-refresher>
    <!-- list数据,建议像下方这样在item外层套一个view,而非直接for循环item,因为slot插入有数量限制 -->
	<view class="item" v-for="(item,index) in dataList" :key="index">
	    <view class="item-title">{{item.title}}</view>
	</view>
</z-paging>
  • 自定义加载更多各个状态的描述view示例
  • 以修改【没有更多了】状态描述view为例
<z-paging ref="paging" v-model="dataList" @query="queryList">
    <view class="item" v-for="(item,index) in dataList" :key="index">
        <view class="item-title">{{item.title}}</view>
    </view>
    <view style="background-color: red" slot="loadingMoreNoMore">这是完全自定义的没有更多数据view</view>
</z-paging>
  • 使用页面滚动示例
  • 选项式api写法(vue2/vue3)
<!-- 使用页面滚动示例(无需设置z-paging的高度) -->
<template>
	<view class="content">
		<!-- 此时使用了页面的滚动,z-paging不需要有确定的高度,use-page-scroll需要设置为true -->
		<!-- 注意注意!!这里的ref必须设置且必须等于"paging",否则mixin方法无效 -->
		<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
			<!-- 如果希望其他view跟着页面滚动,可以放在z-paging标签内 -->
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<view class="item-title">{{item.title}}</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	//使用页面滚动时引入此mixin,用于监听和处理onPullDownRefresh等页面生命周期方法(如果全局引入了,就不要这一步,全局引入示例见main.js)
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		//注意这一步不要漏掉,必须注册mixins(如果全局引入了,就不要这一步,全局引入示例见main.js)
		mixins: [ZPMixin],
		data() {
			//参见demo
		},
		methods: {
			//参见demo
		}
	}
</script>

更多示例,请访问官方文档查看:基本使用

如您在阅读中发现不足,欢迎留言!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/772809.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI对话+AI绘画,提高你的生产力

智心AI平台 使用 Nestjs 和 Vue3 搭建的 AIGC 生态社区 在线使用&#xff1a;用户端体验 当前特色支持功能 GPT3/4模型支持与控制联网对话支持思维导图生成支持openai DALL-E2绘画支持Midjourney绘画支持全套卡密系统支持在线支付支持完善的后台管理系统支持 源码购买或者…

Unity---Spine动画

目录 1.介绍 2.优点 3.spine导出的unity资源 4.导入 5.导入报错的解决方案 6.使用 7.代码示例 1.加载Spine骨骼动画&#xff1a; 2.控制Spine动画的播放&#xff1a; 3.暂停和恢复动画播放&#xff1a; 4.监听动画事件&#xff1a; 5.切换皮肤&#xff08;换装&…

Rsync(二十七)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、概述 二、特性 三、应用场景 四、数据的同步方式 五、rsync传输模式 六、rsync应用 七、rsync 命令 1. 格式 1.1 作为远程命令 1. 2 作为rsync服务 2. 选项 3.…

​通达信量比捉牛股指标源码​_通达信公式

JL5:MA(V,5); LB:DYNAINFO(17); 历史量比:IF(DYNAINFO(4)OANDDYNAINFO(5)HANDDYNAINFO(6)LANDDYNAINFO(7) C,DYNAINFO(17),V/JL5),LINETHICK,COLORYELLOW; STICKLINE(历史量比>1,历史量比,0,3,1)COLORRED; STICKLINE(历史量比<1,历史量比,0,3,0)COLO…

Debug调试的使用(IDEA 基础篇 喂奶级教程)

引言 在编程中&#xff0c;Debug&#xff08;调试&#xff09;是指在程序运行时&#xff0c;通过一系列的工具和技术&#xff0c;对程序进行逐行调试和分析&#xff0c;从而发现和修复程序中的错误和问题。Debug 功能是程序开发中非常重要的一个环节&#xff0c;它可以帮助开发…

JSON对象的stringify()和parse()方法使用

JSON对象的stringify和parse方法使用 JSON 格式JSON 对象JSON.stringify()1.JSON.stringify(value)2.JSON.stringify(value,replace)3.JSON.stringify(value,replace,space)4.注意的点 JSON.parse() JSON 格式 JSON 格式&#xff08;JavaScript Object Notation 的缩写&#xf…

一文读懂【TypeScript】的发展设计理念

导语&#xff1a; 在了解 TypeScript 之前&#xff0c;我们需要了解 什么是强类型语言和什么是弱类型语言&#xff0c;以及什么是静态类型&#xff0c;什么又是动态类型。 强类型不允许任意的隐式类型转换&#xff0c;而 弱类型 允许静态类型&#xff1a;一个变量声明时它的类型…

STM32使用高级定时器输出互补pwm波

STM32使用高级定时器输出互补pwm波 前言硬件和软件cubemx新建工程打开Debug模式配置时钟源六大时钟的作用选择Crystal/Ceramic Resonator&#xff0c;即使用外部晶振作为HSE的时钟源。 配置时钟配置高级定时器TIM8和通用定时器TIM3这里大概解释一下配置pwm输出用到的几个参数我…

ASEMI快恢复二极管MUR20100CTR在电子工程中的应用

编辑-Z 随着电子技术的日益发展&#xff0c;各种电子元件的使用场景与需求也在逐步扩大。今天&#xff0c;我们将聚焦于一款广泛应用于各类电路的二极管——MUR20100CTR&#xff0c;来详细解读其性能特征及应用。 一、MUR20100CTR二极管的主要特性 MUR20100CTR是一款极高性能的…

03 QT对象树

Tips: QT通过对象树机制&#xff0c;能够自动、有效的组织和管理继承自QObject的Qt对象&#xff0c;不需要用户手动回收资源&#xff0c;系统自动调用析构函数。 验证对象树功能&#xff1a; 新建C文件 继承自QPushButton&#xff0c;但没有QPushButton&#xff0c;但有其父类…

简单高效的交易系统,只需这种行情分析工具

行情分析的意义在于&#xff0c;首先它给我们不得不做出的方向性选择提供一些技术的支持。其次&#xff0c;它可以给我们提出一个入市点&#xff0c;一个理想的盈利点&#xff0c;一个认输的失败点。无论你用什么办法进行行情预测或指导&#xff0c;只要你的分析结果中有这样三…

Vue中的侦听器:数据变化的秘密揭示

一、侦听器&#xff1a;vue中想监听数据的变化 &#x1f680;&#xff08;一&#xff09;侦听器watch 如何侦听到某个变量值改变呢&#xff1f;使用watch配置项&#x1f6a7;&#x1f6a7;&#x1f6a7;watch&#xff1a;可以侦听到data/computed属性值的改变。语法&#xff…

C++入门学习(2)

思维导图&#xff1a; 一&#xff0c;缺省参数 如何理解缺省参数呢&#xff1f;简单来说&#xff0c;缺省参数就是一个会找备胎的参数&#xff01;为什么这样子说呢&#xff1f;来看一个缺省参数就知道了&#xff01;代码如下&#xff1a; #include<iostream> using std…

商城-学习整理-基础-环境搭建(二)

目录 一、环境搭建1、安装linux虚拟机1&#xff09;下载&安装 VirtualBox https://www.virtualbox.org/&#xff0c;要开启 CPU 虚拟化2&#xff09;虚拟机的网络设置3&#xff09;虚拟机允许使用账号密码登录4&#xff09;VirtualBox冲突5&#xff09;修改 linux 的 yum 源…

JDK JRE JVM

JDK JRE JVM JDKJREJVM三者之间的联系三者之间的区别 JDK JDK是用于开发、编译、调试和运行Java应用程序的软件包&#xff0c;包含了Java编程语言的开发工具和Java运行时环境。JDK包括Java编译器&#xff08;javac&#xff09;、Java虚拟机&#xff08;JVM&#xff09;和Java类…

AtcoderABC246场

#A - Four PointsA - Four Points 题目大意 在平面上有一个矩形&#xff0c;矩形的每条边都平行于x轴或y轴&#xff0c;并且它的面积不为零。 给定这个矩形三个顶点的坐标 (x1, y1), (x2, y2), (x3, y3)&#xff0c;找到另外一个顶点的坐标。 思路分析 根据矩形的性质可以通…

为什么低代码只能掀起小浪花?了解低代码的得失与前景

导语&#xff1a;低代码是相对于高代码和无代码的一个中间概念&#xff0c;通常强调的是用户不需要学习如何写代码&#xff0c;就能完成工作。然而低代码模式一直不温不火&#xff0c;原因是什么呢&#xff1f;一起来看一下吧。 最近互联网大公司裁员消息又起&#xff0c;“低代…

裁剪内核和新内核available差异大原因分析

背景 host内核裁剪时会进行收益的比较&#xff0c;比如裁剪前用5.10最新内核得出内存数据&#xff0c;然后和裁剪后的内存数据进行对比。 在进行对比中&#xff0c;发现裁剪后的内存available比裁剪前多了10个G&#xff0c;有点不正常了&#xff0c;需要分析下这10个G到底是怎…

基于VORS、CCDM模型、GeoDetector、GWR模型集成技术在城镇化与生态系统健康空间关系分析及影响效应

详情点击链接&#xff1a;基于VORS、CCDM模型、GeoDetector、GWR模型集成技术在城镇化与生态系统健康空间关系分析及影响效应 第一&#xff1a;生态系统健康理论基础及研究热点分析 1.生态系统健康概念及内涵 2.生态系统健康评价方法与指标体系 3.城镇化与生态系统健康 4.…

Git使用规范Git常用命令

Git使用规范&&Git常用命令 分支规范 master分支 master的分支HEAD和历史commit均是是稳定、可发布的状态。master分支的每个commit都需要打tag&#xff0c;如v1.0、v1.1、v1.2、v2.0等。仅能从test分支和hotfix分支合并过来。 hotfix的合并必须是通过代码审核和测试…