【z |
您所在的位置：网站首页 › uniapp分页加载刷新 › 【z |
【z
|
更新记录
0.2.1（2024-03-10）
1.新增 scroll-to-top-when-reload和clean-list-when-reload，支持控制reload时是否自动滚动到顶部&reload时是否立即自动清空原list。 2.修复 在HBuilderX4.0+ 中loading动画失效的问题。 3.修复 分页加载到没有更多数据后下拉刷新，底部依然为没有更多状态的问题。 4.修复 在HBuilderX4.0+ 中点击返回顶部按钮展示异常的问题。 5.优化 reload自动清空列表；滑动切换选项卡支持下拉刷新。 0.2.0（2024-02-02）支持HBuilder X 4.0 0.1.5（2024-01-22）1.新增 方法：completeByTotal，支持通过total判断是否有更多数据。 2.新增 方法：completeByNoMore，支持自行判断是否有更多数据。 3.新增 demo：空数据图&加载失败。 4.新增 z-paging-x logo&更新首页导航栏。 查看更多 平台兼容性 Vue2 Vue3 √ √ App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 HBuilderX 3.7.0，Android：支持，iOS：不确定 × × × × × × 钉钉小程序 快手小程序 飞书小程序 京东小程序 × × × × H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari × × × × × × × × × z-paging-x
z-paging uniapp x版
在main.uts中 import { setZPXConfig } from '@/uni_modules/z-paging-x/components/z-paging-x/config/index.uts' setZPXConfig({ //配置分页默认pageSize为15 'default-page-size': 15, //配置空数据图默认描述文字为：空空如也~~ 'empty-text': '空空如也~~', //... }); 数据&布局配置 参数 说明 类型 默认值 可选值 v-model 绑定最终的列表渲染变量(页面data中声明的值)，当列表数据改变时，所绑定的变量会跟着改变 Array - - default-page-no 自定义初始的pageNo(从第几页开始) Number 1 - default-page-size 自定义pageSize(每页显示多少条) Number 10 - fixed z-paging-x是否使用fixed布局，若使用fixed布局，则z-paging-x的父view无需固定高度，z-paging-x高度默认铺满屏幕，页面中的view请放在z-paging-x标签内，需要固定在顶部的view使用slot="top"包住，需要固定在底部的view使用slot="bottom"包住。 Boolean true false auto mounted后自动调用reload方法(mounted后自动调用接口) Boolean true false paging-style 自定义组件的样式 Object {} - list-view&scroll-view相关配置 参数 说明 类型 默认值 可选值 list-is list的类型：list-view或scroll-view String list-view scroll-view list-id list的id String '' - show-scrollbar 控制是否出现滚动条 Boolean true false rebound 控制是否回弹效果 Boolean true false custom-nested-scroll (子元素中使用)子元素是否开启嵌套滚动，将滚动事件与父元素协商处理 Boolean false true start-nested-scroll (仅listIs = scroll-view有效，父元素中使用)是否与子元素开启滚动协商 Boolean false true nested-scroll-child (仅listIs = scroll-view有效)嵌套滚动子元素的id属性，不支持ref，scroll-view惯性滚动时会让对应id元素视图进行滚动，子元素滚动时会触发scroll-view的nestedprescroll事件，嵌套子元素需要设置custom-nested-scroll = true String '' - reload相关配置 参数 说明 类型 默认值 可选值 scroll-to-top-when-reload reload时自动滚动到顶部(如果reload时list被清空导致占位消失也可能会自动返回到顶部，因此如果是这种情况还需要将clean-list-when-reload设置为false) Boolean true false clean-list-when-reload reload时立即自动清空原list，若立即自动清空，则在reload之后、请求回调之前页面是空白的 Boolean true false 下拉刷新配置 参数 说明 类型 默认值 可选值 refresher-enabled 是否开启自定义下拉刷新 Boolean true false refresher-threshold 设置自定义下拉刷新阈值，默认单位为px。默认高度等于refresher高度 Number 0 - use-custom-refresher 是否使用自定义的下拉刷新，默认为是，即使用z-paging-x的下拉刷新。设置为false即代表使用unix自带的下拉刷新 Boolean true false refresher-default-text 自定义下拉刷新默认状态下的文字 String 继续下拉刷新 - refresher-pulling-text 自定义下拉刷新松手立即刷新状态下的文字 String 松开立即刷新 - refresher-refreshing-text 自定义下拉刷新刷新中状态下的文字 String 正在刷新... - refresher-background 下拉刷新区域背景颜色 String #FFF show-refresher-when-reload 列表刷新时自动显示下拉刷新view Boolean false true refresher-update-time-key 如果需要区别不同页面的最后更新时间，请为不同页面的z-paging-x的refresher-update-time-key设置不同的字符串 String default - 底部加载更多配置 参数 说明 类型 默认值 可选值 load-more-enabled 是否启用加载更多数据(含滑动到底部加载更多数据和点击加载更多数据) Boolean true false load-more-default-text 滑动到底部"默认"文字 String 点击加载更多 - load-more-loading-text 滑动到底部"加载中"文字 String 正在加载... - load-more-no-more-text 滑动到底部"没有更多"文字 String 没有更多了 - load-more-fail-text 滑动到底部"加载失败"文字 String 加载失败，点击重新加载 - 空数据图配置 参数 说明 类型 默认值 可选值 empty-text 空数据描述文字 String 没有数据哦~ - empty-img 空数据图片，默认使用z-paging-x内置的图片 String - - empty-error-text 空数据加载失败文字 String 很抱歉，加载失败 - empty-error-img 空数据加载失败图片，默认使用z-paging-x内置的图片 String - - 点击返回顶部配置 参数 说明 类型 默认值 可选值 show-back-to-top 是否显示点击返回顶部按钮 Boolean false true back-to-top-threshold 点击返回顶部按钮显示/隐藏的阈值(滚动距离)，默认单位为px。 Number 300 - back-to-top-img 点击返回顶部按钮的自定义图片地址，默认使用z-paging内置的图片 String - - back-to-top-style 点击返回顶部按钮的自定义样式 Object {} - events 事件名 说明 回调参数 @query 下拉刷新或滚动到底部时会自动触发此方法。z-paging-x加载时也会触发(若要禁止，请设置:auto="false")。pageNo和pageSize会自动计算好，直接传给服务器即可。 参数1:pageNo(当前第几页)；参数2:pageSize(每页多少条)(pageSize必须与传给服务器的一致，如果需要修改pageSize，请通过:default-page-size="15"修改) @refresh 下拉刷新被触发 - @scroll 列表滚动时触发 参数1:(event: ScrollEvent) => void @backToTopClick 点击了返回到顶部 点击返回顶部按钮后是否滚动到顶部，默认为是。如果需要禁止滚动到顶部事件，则在page的methods中书写：backToTopClick(e: (toTop: boolean) => void) { e(false); //处理自己的业务逻辑} methods 方法名 说明 参数 reload 重新加载分页数据，pageNo恢复为默认值，相当于下拉刷新的效果 - complete 请求成功调用此方法，将请求的结果数组传递给z-paging-x处理 参数1(必填):请求结果数组； completeByTotal 【通过total判断是否有更多数据】请求成功调用此方法(将此方法替换complete方法即可，此方法为complete方法的功能扩展，遵循complete原有规则) 参数1(必填):请求结果数组；参数2(必填):列表总长度； completeByNoMore 【自行判断是否有更多数据】请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging-x处理(将此方法替换complete方法即可，此方法为complete方法的功能扩展，遵循complete原有规则) 参数1(必填):请求结果数组；参数2(必填):是否没有更多数据，若为true则代表没有更多数据了； completeByError 请求结束(失败)调用此方法，将自动展示失败页面 - scrollToTop 滚动到顶部 - scrollToBottom 滚动到底部 - scrollToY 滚动到指定位置 参数1(必填):滚动到的位置 slots 名称 说明 top 可以将自定义导航栏、tab-view等需要固定的(不需要跟着滚动的)元素放入slot="top"的view中。注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="top"。需要固定在顶部的view请勿设置position: fixed; bottom 可以将需要固定在底部的(不需要跟着滚动的)元素放入slot="bottom"的view中。注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="bottom"。需要固定在底部的view请勿设置position: fixed;。 refresher 自定义下拉刷新view，设置后则不使用uni自带的下拉刷新view和z-paging自定义的下拉刷新view。slot-scope="{ refresherStatus(0-默认状态 1.松手立即刷新 2.刷新中 3.刷新成功) }" loadMore 自定义底部加载更多view，设置后则不使用z-paging-x内置的下拉刷新view。slot-scope="{ loadMoreStatus(0-默认状态 1.加载中 2.没有更多数据 3.加载失败) }" backToTop 自定义点击返回顶部view |
【本文地址】
今日新闻 |
推荐新闻 |