update：z-paging from 2.7.11 => 2.8.6
YunaiV
parent
c7d101cd05
commit
68ed6e1810
|
|
@ -1,74 +1,41 @@
|
|||
## 2.7.11（2024-06-28）
|
||||
1.`新增` 方法`updateVirtualListRender`，支持手动触发虚拟列表渲染更新。
|
||||
2.`新增` 延迟加载列表演示。
|
||||
3.`修复` v2.7.8引出的vue3+npm+微信小程序中，`uni.$zp`配置失效的问题。
|
||||
4.`修复` 在本地分页+虚拟列表情况下，虚拟列表cell未被正常销毁的问题。
|
||||
5.`修复` 打开调试模式下无法获取getApp导致的`cannot read property 'zp_handleQueryCallback' of undefined`的报错。
|
||||
6.`修复` 极小概率出现的分页请求较快且快速滚动到底部时未能加载更多的问题。
|
||||
## 2.7.10（2024-05-10）
|
||||
1.`修复` v2.7.8引出的vue3+npm+微信小程序中，uni.$zp配置失效的问题。
|
||||
## 2.7.9（2024-05-10）
|
||||
1.`修复` 在新版HbuilderX+vue3+微信小程序中可能出现的加载第二页数据后返回顶部无法下拉的问题。
|
||||
2.`修复` 在vue3+抖音小程序中可能出现的首次加载reload没有触发的问题。
|
||||
3.`优化` ts类型中，`ZPagingInstance`泛型不必填，默认为`any`。
|
||||
## 2.7.8（2024-05-09）
|
||||
1.`新增` typescript类型声明文件，感谢小何同学提供。
|
||||
2.`新增` 添加极简写法fetch相关配置及示例。
|
||||
3.`新增` `fixed-cellHeight`配置，支持在虚拟列表中自定义固定的cell高度。
|
||||
4.`新增` `refresher-refreshing-scrollable`配置，支持自定义下拉刷新中是否允许列表滚动。
|
||||
5.`修复` 在新版HubilderX+vue3+h5中，`swiper-demo`模式`slot=top`被导航栏遮挡的问题。
|
||||
6.`修复` 下拉进入二楼偶现的二楼高度未铺满全屏的问题。
|
||||
7.`修复` 虚拟列表中complete若传相同对象会导致key重复的问题。
|
||||
8.`修复` 在虚拟列表中调用refresh后缓存高度原始数据未清空的问题。
|
||||
9.`修复` 聊天记录模式删除记录时顶部显示loading的问题。
|
||||
9.`优化` `scrollIntoViewByIndex`支持在虚拟列表中滚动到指定cell。
|
||||
10.`优化` `content-z-index`默认值修改为1。
|
||||
## 2.7.7（2024-04-01）
|
||||
1.`新增` 下拉进入二楼功能及相关配置&demo。
|
||||
2.`新增` 虚拟列表写法添加【非内置列表】写法，可良好兼容vue3中的各平台并有较优的性能表现。
|
||||
3.`新增` `z-paging-cell`补充`@touchstart`事件。
|
||||
4.`修复` 页面滚动模式设置了`auto-full-height`后可能出现的依然有异常空白占位的问题和下拉刷新时列表数据被切割的问题。
|
||||
## 2.7.6（2024-02-29）
|
||||
1.`新增` `max-width`，支持设置`z-paging`的最大宽度，默认`z-paging`宽度铺满窗口。
|
||||
2.`新增` `chat-adjust-position-offset`，支持设置使用聊天记录模式中键盘弹出时占位高度偏移距离。
|
||||
3.`修复` 由于renderjs中聊天记录模式判断不准确导致的可能出现的从聊天记录页面跳转到其他页面后返回页面无法滚动的问题。
|
||||
4.`修复` 聊天记录模式首次加载失败后，发送消息顶部会显示加载失败文字的问题。
|
||||
5.`修复` 聊天记录模式nvue可能出现的键盘弹出无法滚动到底部的问题。
|
||||
6.`修复` 聊天记录模式+nvue滚动条无法展示的问题&底部会显示加载中的问题。
|
||||
7.`修复` 聊天记录模式监听键盘弹出可能出现的无法正常销毁的问题。
|
||||
8.`修复` 直接修改dataList的值组件内部的值未更新的问题。
|
||||
## 2.7.5（2024-01-23）
|
||||
1.`新增` props：`chat-loading-more-default-as-loading`，支持设置在聊天记录模式中滑动到顶部状态为默认状态时，以加载中的状态展示。
|
||||
2.`新增` slots：`chatNoMore`，支持自定义聊天记录模式没有更多数据view。
|
||||
3.`修复` 固定在底部view可能出现默认黄色的问题。
|
||||
4.`优化` 聊天记录加载更多样式，与普通模式对齐，支持点击加载更多&点击重试，并支持加载更多相关配置。
|
||||
5.`优化` 微调下拉刷新和底部加载更多样式。
|
||||
6.`优化` 聊天记录模式自动滚动到底部添加延时以避免可能出现的滚动到底部位置不正确的问题。
|
||||
7.`优化` 使用新的判断滚动到顶部算法以解决在安卓设备中可能出现的因滚动到顶部时scrollTop不为0导致的下拉刷新被禁用的问题。
|
||||
## 2.7.4（2024-01-14）
|
||||
1.`新增` props:`auto-adjust-position-when-chat`，支持设置使用聊天记录模式中键盘弹出时是否自动调整slot="bottom"高度。
|
||||
2.`新增` props:`auto-to-bottom-when-chat`，支持设置使用聊天记录模式中键盘弹出时是否自动滚动到底部。
|
||||
3.`新增` props:`show-chat-loading-when-reload`，支持设置使用聊天记录模式中reload时是否显示chatLoading。
|
||||
4.`修复` 在聊天记录模式中`scrollIntoViewById`和`scrollIntoViewByNodeTop`无效的问题。
|
||||
5.`优化` 聊天记录模式底部安全区域针对键盘开启/关闭兼容处理。
|
||||
6.`优化` 更新内置的空数据图&加载失败图，感谢图鸟UI提供的免费可商用的空数据图和加载失败图！
|
||||
## 2.7.3（2024-01-10）
|
||||
1.`新增` 聊天记录模式支持虚拟列表&添加相关demo。
|
||||
2.`新增` nvue中list添加`@scrollend`监听。
|
||||
3.`优化` 聊天记录模式+vue第一页并且没有更多时不倒置列表。
|
||||
4.`优化` 聊天记录模式+nvue中数据不满屏时默认从顶部开始，不进行列表倒置。
|
||||
## 2.7.2（2024-01-09）
|
||||
1.`修复` `vue3+h5`中报错`uni.onKeyboardHeightChange is not a function`的问题。
|
||||
2.`优化` 聊天记录模式细节：表情面板在触摸列表时隐藏&添加隐藏动画。
|
||||
## 2.7.1（2024-01-08）
|
||||
1.`新增` `keyboardHeightChange` event，支持监听键盘高度改变。
|
||||
2.`新增` 聊天记录模式新增切换表情面板/键盘demo。
|
||||
3.`优化` 键盘弹出占位添加动画效果。
|
||||
## 2.7.0（2024-01-07）
|
||||
2024新年快乐！！祝大家在新的一年里工作顺利，事事顺心！
|
||||
1.`新增` 全新的聊天记录模式设计！将vue中的聊天记录模式与nvue中对齐，完全解决了聊天记录模式滚动到顶部加载更多在vue中抖动的问题，同时将聊天记录模式键盘自动弹出自动上推页面交由`z-paging`处理，解决了由此引发的各种问题，尤其是在微信小程序中导航栏被键盘顶出屏幕外的问题。如果您使用了`z-paging`的聊天记录模式，强烈建议更新，写法有一定变更，具体请参见demo。
|
||||
2.`新增` `swiper-demo`新增`onShow`时候调用reload演示。
|
||||
3.`修复` 修复滚动相关方法在微信小程序中首次滚动动画无效的问题。
|
||||
4.`修复` props设置单位，单位为px时报错的问题。
|
||||
5.`修复` 在某些情况下`z-paging`加载了但是未渲染时，reload无效的问题。
|
||||
6.`修复` 底部loading动画未生效的问题。
|
||||
## 2.8.6（2025-03-17）
|
||||
1.`新增` 聊天记录模式流式输出（类似chatGPT回答）演示demo。
|
||||
2.`新增` z-paging及其公共子组件支持`HBuilderX`代码文档提示。
|
||||
3.`新增` props：`virtual-in-swiper-slot`，用以解决vue3+(微信小程序或QQ小程序)中，使用非内置列表写法时，若z-paging在`swiper-item`中存在的无法获取slot插入的cell高度进而导致虚拟列表失败的问题。
|
||||
4.`新增` `@scrolltolower`和@`scrolltoupper`支持nvue。
|
||||
5.`修复` 由`v2.8.1`引出的方法`scrollIntoViewById`在微信小程序+vue3中无效的问题。
|
||||
6.`修复` 由`v2.8.1`引出的在子组件内使用z-paging虚拟列表无效的问题。
|
||||
7.`修复` 在微信小程序中基础库版本较高时`wx.getSystemInfoSync is deprecated`警告。
|
||||
8.`优化` 提升下拉刷新在鸿蒙Next中的性能。
|
||||
9.`优化` `@scrolltolower`和`@scrolltoupper`在倒置的聊天记录模式下的触发逻辑。
|
||||
10.`优化` 其他细节调整。
|
||||
## 2.8.5（2025-02-09）
|
||||
1.`新增` 方法`scrollToX`，支持控制x轴滚动到指定位置。
|
||||
2.`修复` 快手小程序中报错`await isn't allowed in non-async function`的问题。
|
||||
3.`修复` 在iOS+nvue中，设置了`:loading-more-enabled="false"`后，调用`scrollToBottom`无法滚动到底部的问题。
|
||||
4.`修复` 在支付宝小程序+页面滚动中，数据为空时空数据图未居中的问题。
|
||||
5.`优化` fetch types修改。
|
||||
## 2.8.4（2024-12-02）
|
||||
1.`修复` 在虚拟列表+vue2中，顶部占位采用transformY方案；在虚拟列表+vue3中，顶部占位采用view占位方案。以解决在vue2+微信小程序+安卓+兼容模式中，可能出现的虚拟列表闪动的问题。
|
||||
2.`修复` 在列表渲染时（尤其是在虚拟列表中）偶现的【点击加载更多】闪现的问题。
|
||||
3.`优化` 统一在RefresherStatus枚举中Loading取值。
|
||||
4.`优化` `defaultPageNo`&`defaultPageSize`修改为只允许number类型。
|
||||
5.`优化` 提升兼容性&细节优化。
|
||||
## 2.8.3（2024-11-27）
|
||||
1.`修复` `doInsertVirtualListItem`插入数据无效的问题。
|
||||
2.`优化` 提升兼容性&细节优化。
|
||||
## 2.8.2（2024-11-25）
|
||||
1.`优化` types中`ZPagingRef`和`ZPagingInstance`支持泛型。
|
||||
## 2.8.1（2024-11-24）
|
||||
1.`新增` 完整的`props`、`slots`、`methods`、`events`的typescript types声明，可在ts中获得绝佳的代码提示体验。
|
||||
2.`新增` `virtual-cell-id-prefix`：虚拟列表cell id的前缀，适用于一个页面有多个虚拟列表的情况，用以区分不同虚拟列表cell的id。
|
||||
3.`修复` 在vue3+(微信小程序或QQ小程序)中，使用非内置列表写法时，若`z-paging`在`swiper-item`标签内的情况下存在的无法获取slot插入的cell高度的问题。
|
||||
4.`修复` 在虚拟列表中分页数据小于1页时插入新数据，虚拟列表未生效的问题。
|
||||
5.`修复` 在虚拟列表中调用`refresh`时，cell的index计算不正确的问题。
|
||||
6.`修复` 在快手小程序中内容较少或空数据时`z-paging`未能铺满全屏的问题。
|
||||
7.`优化` `events`中的参数涉及枚举的部分，统一由之前的number类型修改为string类型，展示更直观！涉及的events：`@query`中的`from`参数；`@refresherStatusChange`中的`status`参数；`@loadingStatusChange`中的`status`参数；`slot=refresher`中的`refresherStatus`参数；`slot=chatLoading`中的`loadingMoreStatus`参数。更新版本请特别留意！
|
||||
## 2.8.0（2024-10-21）
|
||||
1.`新增` 全面支持鸿蒙Next。
|
||||
2.`修复` 设置了`refresher-complete-delay`后，在下拉刷新期间调用reload导致的无法再次下拉刷新的问题。
|
||||
3.`优化` 废弃虚拟列表transformY顶部占位方案，修改为空view占位。解决因使用旧方案导致的vue3中可能出现的虚拟列表闪动问题。提升虚拟列表的兼容性。
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* z-paging-cell 组件
|
||||
* @description 用于兼容 nvue 和 vue 中的 cell 渲染。因为在 nvue 中 z-paging 内置的是 list，因此列表 item 必须使用 cell 包住；在 vue 中不能使用 cell，否则会报组件找不到的错误。此子组件为了兼容这两种情况，内部作了条件编译处理。
|
||||
* @tutorial https://z-paging.zxlee.cn/api/sub-components/main.html#z-paging-cell配置
|
||||
* @notice 以下为 z-paging-cell 的配置项
|
||||
* @property {Object} cellStyle cell 样式，默认为 {}
|
||||
* @example <z-paging-cell :cellStyle="{ backgroundColor: '#f0f0f0' }"></z-paging-cell>
|
||||
*/
|
||||
export default {
|
||||
name: "z-paging-cell",
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,26 @@
|
|||
|
||||
<script>
|
||||
import zStatic from '../z-paging/js/z-paging-static'
|
||||
|
||||
/**
|
||||
* z-paging-empty-view 空数据组件
|
||||
* @description 通用的 z-paging 空数据组件
|
||||
* @tutorial https://z-paging.zxlee.cn/api/sub-components/main.html#z-paging-empty-view配置
|
||||
* @property {Boolean} emptyViewFixed 空数据图片是否铺满 z-paging，默认为 false。若设置为 true，则为填充满 z-paging 的剩余部分
|
||||
* @property {String} emptyViewText 空数据图描述文字，默认为 '没有数据哦~'
|
||||
* @property {String} emptyViewImg 空数据图图片，默认使用 z-paging 内置的图片 (建议使用绝对路径，开头不要添加 "@"，请以 "/" 开头)
|
||||
* @property {String} emptyViewReloadText 空数据图点击重新加载文字，默认为 '重新加载'
|
||||
* @property {Object} emptyViewStyle 空数据图样式，可设置空数据 view 的 top 等，如: empty-view-style="{'top':'100rpx'}" (如果空数据图不是 fixed 布局，则此处是 margin-top)，默认为 {}
|
||||
* @property {Object} emptyViewImgStyle 空数据图 img 样式，默认为 {}
|
||||
* @property {Object} emptyViewTitleStyle 空数据图描述文字样式，默认为 {}
|
||||
* @property {Object} emptyViewReloadStyle 空数据图重新加载按钮样式，默认为 {}
|
||||
* @property {Boolean} showEmptyViewReload 是否显示空数据图重新加载按钮(无数据时)，默认为 false
|
||||
* @property {Boolean} isLoadFailed 是否是加载失败，默认为 false
|
||||
* @property {String} unit 空数据图中布局的单位，默认为 'rpx'
|
||||
* @event {Function} reload 点击了重新加载按钮
|
||||
* @event {Function} viewClick 点击了空数据图 view
|
||||
* @example <z-paging-empty-view empty-view-text="暂无数据" />
|
||||
*/
|
||||
export default {
|
||||
name: "z-paging-empty-view",
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -26,6 +26,23 @@
|
|||
|
||||
<script>
|
||||
import zPaging from '../z-paging/z-paging'
|
||||
/**
|
||||
* z-paging-swiper-item 组件
|
||||
* @description swiper+list极简写法中使用到，实际上就是对普通的swiper+list中swiper-item的包装封装，用以简化写法，但个性化配置局限较多
|
||||
* @tutorial https://z-paging.zxlee.cn/api/sub-components/main.html#z-paging-swiper-item配置
|
||||
* @notice 以下为 z-paging-swiper-item 的配置项
|
||||
* @property {Number} tabIndex 当前组件的 index，也就是当前组件是 swiper 中的第几个，默认为 0
|
||||
* @property {Number} currentIndex 当前 swiper 切换到第几个 index，默认为 0
|
||||
* @property {Boolean} useVirtualList 是否使用虚拟列表，默认为 false
|
||||
* @property {Boolean} useInnerList 是否在 z-paging 内部循环渲染列表（内置列表），默认为 false。若 useVirtualList 为 true，则此项恒为 true
|
||||
* @property {String} cellKeyName 内置列表 cell 的 key 名称，仅 nvue 有效，在 nvue 中开启 useInnerList 时必须填此项，默认为 ''
|
||||
* @property {Object} innerListStyle innerList 样式，默认为 {}
|
||||
* @property {Number|String} preloadPage 预加载的列表可视范围（列表高度）页数，默认为 12。此数值越大，则虚拟列表中加载的 dom 越多，内存消耗越大（会维持在一个稳定值），但增加预加载页面数量可缓解快速滚动短暂白屏问题
|
||||
* @property {String} cellHeightMode 虚拟列表 cell 高度模式，默认为 'fixed'，也就是每个 cell 高度完全相同，将以第一个 cell 高度为准进行计算。可选值【dynamic】，即代表高度是动态非固定的，【dynamic】性能低于【fixed】
|
||||
* @property {Number|String} virtualListCol 虚拟列表列数，默认为 1。常用于每行有多列的情况，例如每行有 2 列数据，需要将此值设置为 2
|
||||
* @property {Number|String} virtualScrollFps 虚拟列表 scroll 取样帧率，默认为 60，过高可能出现卡顿等问题
|
||||
* @example <z-paging-swiper-item ref="swiperItem" :tabIndex="index" :currentIndex="current" @query="queryList" @updateList="updateList"></z-paging-swiper-item>
|
||||
*/
|
||||
export default {
|
||||
name: "z-paging-swiper-item",
|
||||
components: { zPaging },
|
||||
|
|
|
|||
|
|
@ -28,6 +28,15 @@
|
|||
<script>
|
||||
import commonLayoutModule from '../z-paging/js/modules/common-layout'
|
||||
|
||||
/**
|
||||
* z-paging-swiper 组件
|
||||
* @description 在 swiper 中使用 z-paging 时（左右滑动切换列表），在根节点使用 z-paging-swiper，其相当于一个 view 容器，默认铺满全屏，可免计算高度直接插入 swiper 的视图容器。
|
||||
* @tutorial https://z-paging.zxlee.cn/api/sub-components/main.html#z-paging-swiper配置
|
||||
* @property {Boolean} fixed 是否使用 fixed 布局，默认为 true
|
||||
* @property {Boolean} safeAreaInsetBottom 是否开启底部安全区域适配，默认为 false
|
||||
* @property {Object} swiperStyle z-paging-swiper 样式，默认为 {}
|
||||
* @example <z-paging-swiper :safeAreaInsetBottom="true"></z-paging-swiper>
|
||||
*/
|
||||
export default {
|
||||
name: "z-paging-swiper",
|
||||
mixins: [commonLayoutModule],
|
||||
|
|
@ -57,7 +66,7 @@
|
|||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.systemInfo = uni.getSystemInfoSync();
|
||||
this.systemInfo = this._getSystemInfoSync();
|
||||
setTimeout(this.updateFixedLayout, 100)
|
||||
})
|
||||
// #ifndef APP-PLUS
|
||||
|
|
|
|||
|
|
@ -55,8 +55,12 @@
|
|||
},
|
||||
// 底部加载更多文字
|
||||
ownLoadingMoreText() {
|
||||
const statusTextArr = [this.c.defaultText,this.c.loadingText,this.c.noMoreText,this.c.failText];
|
||||
return statusTextArr[this.finalStatus];
|
||||
return {
|
||||
[this.M.Default]: this.c.defaultText,
|
||||
[this.M.Loading]: this.c.loadingText,
|
||||
[this.M.NoMore]: this.c.noMoreText,
|
||||
[this.M.Fail]: this.c.failText,
|
||||
}[this.finalStatus];
|
||||
},
|
||||
// 底部加载更多状态
|
||||
finalStatus() {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@
|
|||
data() {
|
||||
return {
|
||||
R: Enum.Refresher,
|
||||
isIos: uni.getSystemInfoSync().platform === 'ios',
|
||||
refresherTimeText: '',
|
||||
zTheme: {
|
||||
title: { white: '#efefef', black: '#555555' },
|
||||
|
|
@ -51,20 +50,27 @@
|
|||
};
|
||||
},
|
||||
props: ['status', 'defaultThemeStyle', 'defaultText', 'pullingText', 'refreshingText', 'completeText', 'goF2Text', 'defaultImg', 'pullingImg',
|
||||
'refreshingImg', 'completeImg', 'refreshingAnimated', 'showUpdateTime', 'updateTimeKey', 'imgStyle', 'titleStyle', 'updateTimeStyle', 'updateTimeTextMap', 'unit'
|
||||
'refreshingImg', 'completeImg', 'refreshingAnimated', 'showUpdateTime', 'updateTimeKey', 'imgStyle', 'titleStyle', 'updateTimeStyle', 'updateTimeTextMap', 'unit', 'isIos'
|
||||
],
|
||||
computed: {
|
||||
ts() {
|
||||
return this.defaultThemeStyle;
|
||||
},
|
||||
// 当前状态数组
|
||||
statusTextArr() {
|
||||
// 当前状态Map
|
||||
statusTextMap() {
|
||||
this.updateTime();
|
||||
return [this.defaultText, this.pullingText, this.refreshingText, this.completeText, this.goF2Text];
|
||||
const { R, defaultText, pullingText, refreshingText, completeText, goF2Text } = this;
|
||||
return {
|
||||
[R.Default]: defaultText,
|
||||
[R.ReleaseToRefresh]: pullingText,
|
||||
[R.Loading]: refreshingText,
|
||||
[R.Complete]: completeText,
|
||||
[R.GoF2]: goF2Text,
|
||||
};
|
||||
},
|
||||
// 当前状态文字
|
||||
currentTitle() {
|
||||
return this.statusTextArr[this.status] || this.defaultText;
|
||||
return this.statusTextMap[this.status] || this.defaultText;
|
||||
},
|
||||
// 左侧图片class
|
||||
leftImageClass() {
|
||||
|
|
|
|||
|
|
@ -193,6 +193,10 @@
|
|||
z-index: 999;
|
||||
}
|
||||
|
||||
.zp-back-to-top-img-inversion {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.zp-empty-view {
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -89,10 +89,10 @@ export default {
|
|||
!callbacked && this._handleToTop();
|
||||
})
|
||||
},
|
||||
// 处理滚动到顶部
|
||||
// 处理滚动到顶部（聊天记录模式中为滚动到底部）
|
||||
_handleToTop() {
|
||||
!this.backToTopWithAnimate && this._checkShouldShowBackToTop(0);
|
||||
this.scrollToTop(this.backToTopWithAnimate);
|
||||
!this.useChatRecordMode ? this.scrollToTop(this.backToTopWithAnimate) : this.scrollToBottom(this.backToTopWithAnimate);
|
||||
},
|
||||
// 判断是否要显示返回顶部按钮
|
||||
_checkShouldShowBackToTop(scrollTop) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
// [z-paging]通用布局相关模块
|
||||
import u from '.././z-paging-utils'
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
const weexDom = weex.requireModule('dom');
|
||||
|
|
@ -40,7 +41,7 @@ export default {
|
|||
isOldWebView() {
|
||||
// #ifndef APP-NVUE || MP-KUAISHOU
|
||||
try {
|
||||
const systemInfos = uni.getSystemInfoSync().system.split(' ');
|
||||
const systemInfos = u.getSystemInfoSync(true).system.split(' ');
|
||||
const deviceType = systemInfos[0];
|
||||
const version = parseInt(systemInfos[1]);
|
||||
if ((deviceType === 'iOS' && version <= 10) || (deviceType === 'Android' && version <= 6)) {
|
||||
|
|
@ -78,7 +79,7 @@ export default {
|
|||
// 更新fixed模式下z-paging的布局
|
||||
updateFixedLayout() {
|
||||
this.fixed && this.$nextTick(() => {
|
||||
this.systemInfo = uni.getSystemInfoSync();
|
||||
this.systemInfo = u.getSystemInfoSync();
|
||||
})
|
||||
},
|
||||
// 获取节点尺寸
|
||||
|
|
@ -106,6 +107,12 @@ export default {
|
|||
//#ifdef MP-ALIPAY
|
||||
inDom = false;
|
||||
//#endif
|
||||
|
||||
/*
|
||||
inDom可能是true、false，也可能是具体的dom节点
|
||||
如果inDom不为false，则使用uni.createSelectorQuery().in()进行查询，如果inDom为true，则in中的是this，否则in中的为具体的dom
|
||||
如果inDom为false，则使用uni.createSelectorQuery()进行查询
|
||||
*/
|
||||
let res = !!inDom ? uni.createSelectorQuery().in(inDom === true ? this : inDom) : uni.createSelectorQuery();
|
||||
scrollOffset ? res.select(select).scrollOffset() : res.select(select).boundingClientRect();
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
@ -136,6 +143,10 @@ export default {
|
|||
this.cssSafeAreaInsetBottom = res ? res[0].height : -1;
|
||||
res && success && success();
|
||||
});
|
||||
},
|
||||
// 同步获取系统信息，兼容不同平台（供z-paging-swiper使用）
|
||||
_getSystemInfoSync(useCache = false) {
|
||||
return u.getSystemInfoSync(useCache);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default {
|
|||
props: {
|
||||
// 自定义初始的pageNo，默认为1
|
||||
defaultPageNo: {
|
||||
type: [Number, String],
|
||||
type: Number,
|
||||
default: u.gc('defaultPageNo', 1),
|
||||
observer: function(newVal) {
|
||||
this.pageNo = newVal;
|
||||
|
|
@ -16,7 +16,7 @@ export default {
|
|||
},
|
||||
// 自定义pageSize，默认为10
|
||||
defaultPageSize: {
|
||||
type: [Number, String],
|
||||
type: Number,
|
||||
default: u.gc('defaultPageSize', 10),
|
||||
validator: (value) => {
|
||||
if (value <= 0) u.consoleErr('default-page-size必须大于0！');
|
||||
|
|
@ -473,14 +473,10 @@ export default {
|
|||
if (!isLocal && tempIsUserPullDown && this.isFirstPage) {
|
||||
this.isUserPullDown = false;
|
||||
}
|
||||
if (!this.isFirstPage) {
|
||||
this.listRendering = true;
|
||||
this.$nextTick(() => {
|
||||
u.delay(() => this.listRendering = false);
|
||||
})
|
||||
} else {
|
||||
this.listRendering = false;
|
||||
}
|
||||
this.listRendering = true;
|
||||
this.$nextTick(() => {
|
||||
u.delay(() => this.listRendering = false);
|
||||
})
|
||||
let dataTypeRes = this._checkDataType(data, success, isLocal);
|
||||
data = dataTypeRes.data;
|
||||
success = dataTypeRes.success;
|
||||
|
|
@ -511,7 +507,9 @@ export default {
|
|||
const localPageNo = this.defaultPageNo;
|
||||
const localPageSize = this.queryFrom !== Enum.QueryFrom.Refresh ? this.defaultPageSize : this.currentRefreshPageSize;
|
||||
this._localPagingQueryList(localPageNo, localPageSize, 0, res => {
|
||||
this.completeByTotal(res, this.totalLocalPagingList.length);
|
||||
u.delay(() => {
|
||||
this.completeByTotal(res, this.totalLocalPagingList.length);;
|
||||
}, 0)
|
||||
})
|
||||
} else {
|
||||
// 如果当前不是本地分页，则按照正常分页逻辑进行数据处理&emit数据
|
||||
|
|
@ -538,7 +536,7 @@ export default {
|
|||
this._callDataPromise(false);
|
||||
this.loadingStatus = Enum.More.Fail;
|
||||
this.isHandlingRefreshToPage = false;
|
||||
if (this.loadingType === Enum.LoadingType.LoadingMore) {
|
||||
if (this.loadingType === Enum.LoadingType.LoadMore) {
|
||||
this.pageNo --;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,18 +7,12 @@ import u from '.././z-paging-utils'
|
|||
import c from '.././z-paging-constant'
|
||||
import interceptor from '../z-paging-interceptor'
|
||||
|
||||
const language = uni.getSystemInfoSync().language;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
language
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
finalLanguage() {
|
||||
try {
|
||||
const local = uni.getLocale();
|
||||
const language = this.language;
|
||||
const language = this.systemInfo.appLanguage;
|
||||
return local === 'auto' ? interceptor._handleLanguage2Local(language, this._language2Local(language)) : local;
|
||||
} catch (e) {
|
||||
// 如果获取系统本地语言异常，则默认返回中文，uni.getLocale在部分低版本HX或者cli中可能报找不到的问题
|
||||
|
|
|
|||
|
|
@ -179,12 +179,16 @@ export default {
|
|||
// 是否显示自定义状态下的底部加载更多
|
||||
showLoadingMoreCustom() {
|
||||
return this._showLoadingMore('Custom');
|
||||
}
|
||||
},
|
||||
// 底部加载更多固定高度
|
||||
loadingMoreFixedHeight() {
|
||||
return u.addUnit('80rpx', this.unit);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 页面滚动到底部时通知z-paging进行进一步处理
|
||||
pageReachBottom() {
|
||||
!this.useChatRecordMode && this._onLoadingMore('toBottom');
|
||||
!this.useChatRecordMode && this.toBottomLoadingMoreEnabled && this._onLoadingMore('toBottom');
|
||||
},
|
||||
// 手动触发上拉加载更多(非必须，可依据具体需求使用)
|
||||
doLoadMore(type) {
|
||||
|
|
@ -240,7 +244,7 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
// 触发加载更多时调用,from:toBottom-滑动到底部触发；1、click-点击加载更多触发
|
||||
// 触发加载更多时调用,from:toBottom-滑动到底部触发；click-点击加载更多触发
|
||||
_onLoadingMore(from = 'click') {
|
||||
// 如果是ios并且是滚动到底部的，则在滚动到底部时候尝试将列表设置为禁止滚动然后设置为允许滚动，以禁止底部bounce的效果
|
||||
if (this.isIos && from === 'toBottom' && !this.scrollToBottomBounceEnabled && this.scrollEnable) {
|
||||
|
|
@ -250,7 +254,7 @@ export default {
|
|||
})
|
||||
}
|
||||
// emit scrolltolower
|
||||
this.$emit('scrolltolower', from);
|
||||
this._emitScrollEvent('scrolltolower');
|
||||
// 如果是只使用下拉刷新 或者 禁用底部加载更多 或者 底部加载更多不是默认状态或加载失败状态 或者 是加载中状态 或者 空数据图已经展示了，则return，不触发内部加载更多逻辑
|
||||
if (this.refresherOnly || !this.loadingMoreEnabled || !(this.loadingStatus === Enum.More.Default || this.loadingStatus === Enum.More.Fail) || this.loading || this.showEmpty) return;
|
||||
// #ifdef MP-WEIXIN
|
||||
|
|
@ -275,15 +279,15 @@ export default {
|
|||
// 如果是本地分页，则在组件内部对数据进行分页处理，不触发@query事件
|
||||
this._localPagingQueryList(this.pageNo, this.defaultPageSize, this.localPagingLoadingTime, res => {
|
||||
this.completeByTotal(res, this.totalLocalPagingList.length);
|
||||
this.queryFrom = Enum.QueryFrom.LoadingMore;
|
||||
this.queryFrom = Enum.QueryFrom.LoadMore;
|
||||
})
|
||||
} else {
|
||||
// emit @query相关加载更多事件
|
||||
this._emitQuery(this.pageNo, this.defaultPageSize, Enum.QueryFrom.LoadingMore);
|
||||
this._emitQuery(this.pageNo, this.defaultPageSize, Enum.QueryFrom.LoadMore);
|
||||
this._callMyParentQuery();
|
||||
}
|
||||
// 设置当前加载状态为底部加载更多状态
|
||||
this.loadingType = Enum.LoadingType.LoadingMore;
|
||||
this.loadingType = Enum.LoadingType.LoadMore;
|
||||
}
|
||||
},
|
||||
// (预处理)判断当没有更多数据且分页内容未超出z-paging时是否显示没有更多数据的view
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export default {
|
|||
nLoadingMoreFixedHeight: false,
|
||||
nShowRefresherRevealHeight: 0,
|
||||
nOldShowRefresherRevealHeight: -1,
|
||||
nRefresherWidth: uni.upx2px(750),
|
||||
nRefresherWidth: u.rpx2px(750),
|
||||
nF2Opacity: 0
|
||||
}
|
||||
},
|
||||
|
|
@ -138,6 +138,19 @@ export default {
|
|||
// 列表滚动结束
|
||||
_nOnScrollend(e) {
|
||||
this.$emit('scrollend', e);
|
||||
|
||||
// 判断是否滚动到顶部了
|
||||
if (e?.contentOffset?.y >= 0) {
|
||||
this._emitScrollEvent('scrolltoupper');
|
||||
}
|
||||
// 判断是否滚动到底部了
|
||||
this._getNodeClientRect('.zp-n-list').then(node => {
|
||||
if (node) {
|
||||
if (e?.contentSize?.height + e?.contentOffset?.y <= node[0].height) {
|
||||
this._emitScrollEvent('scrolltolower');
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 下拉刷新刷新中
|
||||
_nOnRrefresh() {
|
||||
|
|
|
|||
|
|
@ -349,7 +349,7 @@ export default {
|
|||
return this.refresherTriggered;
|
||||
},
|
||||
showRefresher() {
|
||||
const showRefresher = this.finalRefresherEnabled && this.useCustomRefresher;
|
||||
const showRefresher = this.finalRefresherEnabled || this.useCustomRefresher && !this.useChatRecordMode;
|
||||
// #ifndef APP-NVUE
|
||||
this.active && this.customRefresherHeight === -1 && showRefresher && this.updateCustomRefresherHeight();
|
||||
// #endif
|
||||
|
|
@ -405,7 +405,7 @@ export default {
|
|||
this.isUserReload = !isUserPullDown;
|
||||
this._startLoading(true);
|
||||
this.refresherTriggered = true;
|
||||
if(this.reloadWhenRefresh && isUserPullDown){
|
||||
if (this.reloadWhenRefresh && isUserPullDown) {
|
||||
this.useChatRecordMode ? this._onLoadingMore('click') : this._reload(false, false, isUserPullDown);
|
||||
}
|
||||
},
|
||||
|
|
@ -439,7 +439,7 @@ export default {
|
|||
this._cleanRefresherEndTimeout();
|
||||
},
|
||||
|
||||
// 非appvue或微信小程序或QQ小程序或h5平台，使用js控制下拉刷新
|
||||
// 非app-vue或微信小程序或QQ小程序或h5平台，使用js控制下拉刷新
|
||||
// #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5
|
||||
// touch中
|
||||
_refresherTouchmove(e) {
|
||||
|
|
@ -615,7 +615,9 @@ export default {
|
|||
// 下拉刷新结束
|
||||
_refresherEnd(shouldEndLoadingDelay = true, fromAddData = false, isUserPullDown = false, setLoading = true) {
|
||||
if (this.loadingType === Enum.LoadingType.Refresher) {
|
||||
// 计算当前下拉刷新结束需要延迟的时间
|
||||
const refresherCompleteDelay = (fromAddData && (isUserPullDown || this.showRefresherWhenReload)) ? this.refresherCompleteDelay : 0;
|
||||
// 如果延迟时间大于0，则展示刷新结束状态，否则直接展示默认状态
|
||||
const refresherStatus = refresherCompleteDelay > 0 ? Enum.Refresher.Complete : Enum.Refresher.Default;
|
||||
if (this.finalShowRefresherWhenReload) {
|
||||
const stackCount = this.refresherRevealStackCount;
|
||||
|
|
@ -624,7 +626,12 @@ export default {
|
|||
}
|
||||
this._cleanRefresherEndTimeout();
|
||||
this.refresherEndTimeout = u.delay(() => {
|
||||
// 更新下拉刷新状态
|
||||
this.refresherStatus = refresherStatus;
|
||||
// 如果当前下拉刷新状态不是刷新结束，则认为其不在刷新结束状态
|
||||
if (refresherStatus !== Enum.Refresher.Complete) {
|
||||
this.isRefresherInComplete = false;
|
||||
}
|
||||
}, this.refresherStatus !== Enum.Refresher.Default && refresherStatus === Enum.Refresher.Default ? this.refresherCompleteDuration : 0);
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
|
|
@ -762,7 +769,7 @@ export default {
|
|||
},
|
||||
// 触发下拉刷新
|
||||
_doRefresherLoad(isUserPullDown = true) {
|
||||
this._onRefresh(false,isUserPullDown);
|
||||
this._onRefresh(false, isUserPullDown);
|
||||
this.loading = true;
|
||||
},
|
||||
// #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5
|
||||
|
|
|
|||
|
|
@ -53,6 +53,8 @@ export default {
|
|||
return {
|
||||
scrollTop: 0,
|
||||
oldScrollTop: 0,
|
||||
scrollLeft: 0,
|
||||
oldScrollLeft: 0,
|
||||
scrollViewStyle: {},
|
||||
scrollViewContainerStyle: {},
|
||||
scrollViewInStyle: {},
|
||||
|
|
@ -166,17 +168,24 @@ export default {
|
|||
this._scrollIntoViewByNodeTop(nodeTop, offset, animate);
|
||||
})
|
||||
},
|
||||
// 滚动到指定位置(vue中有效)。y为与顶部的距离，单位为px；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否
|
||||
// y轴滚动到指定位置(vue中有效)。y为与顶部的距离，单位为px；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否
|
||||
scrollToY(y, offset, animate) {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this._scrollToY(y, offset, animate);
|
||||
})
|
||||
},
|
||||
// x轴滚动到指定位置(非页面滚动且在vue中有效)。x为与左侧的距离，单位为px；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否
|
||||
scrollToX(x, offset, animate) {
|
||||
this.scrollLeft = this.oldScrollLeft;
|
||||
this.$nextTick(() => {
|
||||
this._scrollToX(x, offset, animate);
|
||||
})
|
||||
},
|
||||
// 滚动到指定view(nvue中和虚拟列表中有效)。index为需要滚动的view的index(第几个，从0开始)；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否
|
||||
scrollIntoViewByIndex(index, offset, animate) {
|
||||
if (index >= this.realTotalData.length) {
|
||||
u.consoleErr('当前滚动的index超出已渲染列表长度，请先通过refreshToPage加载到对应index页并等待渲染成功后再调用此方法！')
|
||||
u.consoleErr('当前滚动的index超出已渲染列表长度，请先通过refreshToPage加载到对应index页并等待渲染成功后再调用此方法！');
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -232,7 +241,7 @@ export default {
|
|||
|
||||
// 当滚动到顶部时
|
||||
_onScrollToUpper() {
|
||||
this.$emit('scrolltoupper');
|
||||
this._emitScrollEvent('scrolltoupper');
|
||||
this.$emit('scrollTopChange', 0);
|
||||
this.$nextTick(() => {
|
||||
this.oldScrollTop = 0;
|
||||
|
|
@ -240,7 +249,9 @@ export default {
|
|||
},
|
||||
// 当滚动到底部时
|
||||
_onScrollToLower(e) {
|
||||
(!e.detail || !e.detail.direction || e.detail.direction === 'bottom') && this._onLoadingMore(this.useChatRecordMode ? 'click' : 'toBottom')
|
||||
(!e.detail || !e.detail.direction || e.detail.direction === 'bottom')
|
||||
&& this.toBottomLoadingMoreEnabled
|
||||
&& this._onLoadingMore(this.useChatRecordMode ? 'click' : 'toBottom')
|
||||
},
|
||||
// 滚动到顶部
|
||||
_scrollToTop(animate = true, isPrivate = true) {
|
||||
|
|
@ -379,7 +390,7 @@ export default {
|
|||
this._scrollToY(nodeTop, offset, animate, true);
|
||||
}
|
||||
},
|
||||
// 滚动到指定位置
|
||||
// y轴滚动到指定位置
|
||||
_scrollToY(y, offset = 0, animate = false, addScrollTop = false) {
|
||||
this._updatePrivateScrollWithAnimation(animate);
|
||||
u.delay(() => {
|
||||
|
|
@ -400,19 +411,40 @@ export default {
|
|||
}
|
||||
}, 10)
|
||||
},
|
||||
// x轴滚动到指定位置
|
||||
_scrollToX(x, offset = 0, animate = false) {
|
||||
this._updatePrivateScrollWithAnimation(animate);
|
||||
u.delay(() => {
|
||||
if (!this.usePageScroll) {
|
||||
this.scrollLeft = x - offset;
|
||||
} else {
|
||||
u.consoleErr('使用页面滚动时不支持scrollToX');
|
||||
}
|
||||
}, 10)
|
||||
},
|
||||
// scroll-view滚动中
|
||||
_scroll(e) {
|
||||
this.$emit('scroll', e);
|
||||
const scrollTop = e.detail.scrollTop;
|
||||
const { scrollTop, scrollLeft } = e.detail;
|
||||
// #ifndef APP-NVUE
|
||||
this.finalUseVirtualList && this._updateVirtualScroll(scrollTop, this.oldScrollTop - scrollTop);
|
||||
// #endif
|
||||
this.oldScrollTop = scrollTop;
|
||||
this.oldScrollLeft = scrollLeft;
|
||||
// 滚动区域内容的总高度 - 当前滚动的scrollTop = 当前滚动区域的顶部与内容底部的距离
|
||||
const scrollDiff = e.detail.scrollHeight - this.oldScrollTop;
|
||||
// 在非ios平台滚动中，再次验证一下是否滚动到了底部。因为在一些安卓设备中，有概率滚动到底部不触发@scrolltolower事件，因此添加双重检测逻辑
|
||||
!this.isIos && this._checkScrolledToBottom(scrollDiff);
|
||||
},
|
||||
// emit scrolltolower/scrolltoupper事件
|
||||
_emitScrollEvent(type) {
|
||||
const reversedType = type === 'scrolltolower' ? 'scrolltoupper' : 'scrolltolower';
|
||||
const eventType = this.useChatRecordMode && !this.isChatRecordModeAndNotInversion
|
||||
? reversedType
|
||||
: type;
|
||||
|
||||
this.$emit(eventType);
|
||||
},
|
||||
// 更新内置的scroll-view是否启用滚动动画
|
||||
_updatePrivateScrollWithAnimation(animate) {
|
||||
this.privateScrollWithAnimation = animate ? 1 : 0;
|
||||
|
|
|
|||
|
|
@ -74,6 +74,17 @@ export default {
|
|||
type: [Number, String],
|
||||
default: u.gc('virtualScrollFps', 80)
|
||||
},
|
||||
// 虚拟列表cell id的前缀，适用于一个页面有多个虚拟列表的情况，用以区分不同虚拟列表cell的id，注意：请勿传数字或以数字开头的字符串。如设置为list1，则cell的id应为：list1-zp-id-${item.zp_index}
|
||||
virtualCellIdPrefix: {
|
||||
type: String,
|
||||
default: u.gc('virtualCellIdPrefix', '')
|
||||
},
|
||||
// 虚拟列表是否使用swiper-item包裹，默认为否，此属性为了解决vue3+(微信小程序或QQ小程序)中，使用非内置列表写法时，若z-paging在swiper-item内存在无法获取slot插入的cell高度进而导致虚拟列表失败的问题
|
||||
// 仅vue3+(微信小程序或QQ小程序)+非内置列表写法虚拟列表有效，其他情况此属性设置任何值都无效，所以如果您在swiper-item内使用z-paging的非内置虚拟列表写法，将此属性设置为true即可
|
||||
virtualInSwiperSlot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -110,6 +121,10 @@ export default {
|
|||
virtualList(newVal){
|
||||
this.$emit('update:virtualList', newVal);
|
||||
this.$emit('virtualListChange', newVal);
|
||||
},
|
||||
// 监听虚拟列表顶部占位高度改变并emit
|
||||
virtualPlaceholderTopHeight(newVal) {
|
||||
this.$emit('virtualTopHeightChange', newVal);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -139,17 +154,31 @@ export default {
|
|||
finalFixedCellHeight() {
|
||||
return u.convertToPx(this.fixedCellHeight);
|
||||
},
|
||||
fianlVirtualCellIdPrefix() {
|
||||
const prefix = this.virtualCellIdPrefix ? this.virtualCellIdPrefix + '-' : '';
|
||||
return prefix + 'zp-id';
|
||||
},
|
||||
finalPlaceholderTopHeightStyle() {
|
||||
// #ifdef VUE2
|
||||
return { transform: this.virtualPlaceholderTopHeight > 0 ? `translateY(${this.virtualPlaceholderTopHeight}px)` : 'none' };
|
||||
// #endif
|
||||
return {};
|
||||
},
|
||||
virtualRangePageHeight(){
|
||||
return this.finalVirtualPageHeight * this.preloadPage;
|
||||
},
|
||||
virtualScrollDisTimeStamp() {
|
||||
return 1000 / this.virtualScrollFps;
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 在使用动态高度虚拟列表时，若在列表数组中需要插入某个item，需要调用此方法；item:需要插入的item，index:插入的cell位置，若index为2，则插入的item在原list的index=1之后，index从0开始
|
||||
doInsertVirtualListItem(item, index) {
|
||||
if (this.cellHeightMode !== Enum.CellHeightMode.Dynamic) return;
|
||||
this.realTotalData.splice(index, 0, item);
|
||||
// #ifdef VUE3
|
||||
this.realTotalData = [...this.realTotalData];
|
||||
// #endif
|
||||
this.virtualItemInsertedCount ++;
|
||||
if (!item || Object.prototype.toString.call(item) !== '[object Object]') {
|
||||
item = { item };
|
||||
|
|
@ -162,7 +191,7 @@ export default {
|
|||
while (retryCount <= 10) {
|
||||
await u.wait(c.delayTime);
|
||||
|
||||
const cellNode = await this._getNodeClientRect(`#zp-id-${item[cellIndexKey]}`, this.finalUseInnerList);
|
||||
const cellNode = await this._getVirtualCellNodeByIndex(item[cellIndexKey]);
|
||||
// 如果获取当前cell的节点信息失败，则重试（不超过10次）
|
||||
if (!cellNode) {
|
||||
retryCount ++;
|
||||
|
|
@ -191,12 +220,12 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
// 在使用动态高度虚拟列表时，手动更新指定cell的缓存高度(当cell高度在初始化之后再次改变时调用)；index:需要更新的cell在列表中的位置，从0开始
|
||||
// 在使用动态高度虚拟列表时，手动更新指定cell的缓存高度(当cell高度在初始化之后再次改变后调用)；index:需要更新的cell在列表中的位置，从0开始
|
||||
didUpdateVirtualListCell(index) {
|
||||
if (this.cellHeightMode !== Enum.CellHeightMode.Dynamic) return;
|
||||
const currentNode = this.virtualHeightCacheList[index];
|
||||
this.$nextTick(() => {
|
||||
this._getNodeClientRect(`#zp-id-${index}`, this.finalUseInnerList).then(cellNode => {
|
||||
this._getVirtualCellNodeByIndex(index).then(cellNode => {
|
||||
// 更新当前cell的高度
|
||||
const cellNodeHeight = cellNode ? cellNode[0].height : 0;
|
||||
const heightDis = cellNodeHeight - currentNode.height;
|
||||
|
|
@ -261,7 +290,7 @@ export default {
|
|||
if (!this.finalFixedCellHeight) {
|
||||
this.$nextTick(() => {
|
||||
u.delay(() => {
|
||||
this._getNodeClientRect(`#zp-id-${0}`,this.finalUseInnerList).then(cellNode => {
|
||||
this._getVirtualCellNodeByIndex(0).then(cellNode => {
|
||||
if (!cellNode) {
|
||||
if (this.getCellHeightRetryCount.fixed > 10) return;
|
||||
this.getCellHeightRetryCount.fixed ++;
|
||||
|
|
@ -287,7 +316,7 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
u.delay(async () => {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const cellNode = await this._getNodeClientRect(`#zp-id-${list[i][this.virtualCellIndexKey]}`, this.finalUseInnerList);
|
||||
const cellNode = await this._getVirtualCellNodeByIndex(list[i][this.virtualCellIndexKey]);
|
||||
const currentHeight = cellNode ? cellNode[0].height : 0;
|
||||
if (!cellNode) {
|
||||
if (this.getCellHeightRetryCount.dynamic <= 10) {
|
||||
|
|
@ -328,8 +357,8 @@ export default {
|
|||
_setCellIndex(list, dataFrom = 'bottom') {
|
||||
let currentItemIndex = 0;
|
||||
const cellIndexKey = this.virtualCellIndexKey;
|
||||
([Enum.QueryFrom.Refresh, Enum.QueryFrom.Reload].indexOf(this.queryFrom) >= 0) && this._resetDynamicListState();
|
||||
if (this.totalData.length) {
|
||||
dataFrom === 'bottom' && ([Enum.QueryFrom.Refresh, Enum.QueryFrom.Reload].indexOf(this.queryFrom) >= 0) && this._resetDynamicListState();
|
||||
if (this.totalData.length && this.queryFrom !== Enum.QueryFrom.Refresh) {
|
||||
if (dataFrom === 'bottom') {
|
||||
currentItemIndex = this.realTotalData.length;
|
||||
const lastItem = this.realTotalData.length ? this.realTotalData.slice(-1)[0] : null;
|
||||
|
|
@ -504,6 +533,20 @@ export default {
|
|||
})
|
||||
}
|
||||
},
|
||||
// 获取对应index的虚拟列表cell节点信息
|
||||
_getVirtualCellNodeByIndex(index) {
|
||||
let inDom = this.finalUseInnerList;
|
||||
// 在vue3+(微信小程序或QQ小程序)中，使用非内置列表写法时，若z-paging在swiper-item内存在无法获取slot插入的cell高度的问题
|
||||
// 通过uni.createSelectorQuery().in(this.$parent)来解决此问题
|
||||
// #ifdef VUE3
|
||||
// #ifdef MP-WEIXIN || MP-QQ
|
||||
if (this.forceCloseInnerList && this.virtualInSwiperSlot) {
|
||||
inDom = this.$parent;
|
||||
}
|
||||
// #endif
|
||||
// #endif
|
||||
return this._getNodeClientRect(`#${this.fianlVirtualCellIdPrefix}-${index}`, inDom);
|
||||
},
|
||||
// 处理使用内置列表时点击了cell事件
|
||||
_innerCellClick(item, index) {
|
||||
this.$emit('innerCellClick', item, index);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
export default {
|
||||
// 当前版本号
|
||||
version: '2.7.11',
|
||||
version: '2.8.6',
|
||||
// 延迟操作的通用时间
|
||||
delayTime: 100,
|
||||
// 请求失败时候全局emit使用的key
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
// [z-paging]枚举
|
||||
|
||||
export default {
|
||||
// 当前加载类型 0.下拉刷新 1.上拉加载更多
|
||||
// 当前加载类型 refresher:下拉刷新 load-more:上拉加载更多
|
||||
LoadingType: {
|
||||
Refresher: 0,
|
||||
LoadingMore: 1
|
||||
Refresher: 'refresher',
|
||||
LoadMore: 'load-more'
|
||||
},
|
||||
// 下拉刷新状态 0.默认状态 1.松手立即刷新 2.刷新中 3.刷新结束 4.松手进入二楼
|
||||
// 下拉刷新状态 default:默认状态 release-to-refresh:松手立即刷新 loading:刷新中 complete:刷新结束 go-f2:松手进入二楼
|
||||
Refresher: {
|
||||
Default: 0,
|
||||
ReleaseToRefresh: 1,
|
||||
Loading: 2,
|
||||
Complete: 3,
|
||||
GoF2: 4
|
||||
Default: 'default',
|
||||
ReleaseToRefresh: 'release-to-refresh',
|
||||
Loading: 'loading',
|
||||
Complete: 'complete',
|
||||
GoF2: 'go-f2'
|
||||
},
|
||||
// 底部加载更多状态 0.默认状态 1.加载中 2.没有更多数据 3.加载失败
|
||||
// 底部加载更多状态 default:默认状态 loading:加载中 no-more:没有更多数据 fail:加载失败
|
||||
More: {
|
||||
Default: 0,
|
||||
Loading: 1,
|
||||
NoMore: 2,
|
||||
Fail: 3
|
||||
Default: 'default',
|
||||
Loading: 'loading',
|
||||
NoMore: 'no-more',
|
||||
Fail: 'fail'
|
||||
},
|
||||
// @query触发来源 0.用户主动下拉刷新 1.通过reload触发 2.通过refresh触发 3.通过滚动到底部加载更多或点击底部加载更多触发
|
||||
// @query触发来源 user-pull-down:用户主动下拉刷新 reload:通过reload触发 refresh:通过refresh触发 load-more:通过滚动到底部加载更多或点击底部加载更多触发
|
||||
QueryFrom: {
|
||||
UserPullDown: 0,
|
||||
Reload: 1,
|
||||
Refresh: 2,
|
||||
LoadingMore: 3
|
||||
UserPullDown: 'user-pull-down',
|
||||
Reload: 'reload',
|
||||
Refresh: 'refresh',
|
||||
LoadMore: 'load-more'
|
||||
},
|
||||
// 虚拟列表cell高度模式
|
||||
CellHeightMode: {
|
||||
|
|
|
|||
|
|
@ -24,8 +24,7 @@ import virtualListModule from './modules/virtual-list'
|
|||
|
||||
import Enum from './z-paging-enum'
|
||||
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
|
||||
const systemInfo = u.getSystemInfoSync();
|
||||
export default {
|
||||
name: "z-paging",
|
||||
components: {
|
||||
|
|
@ -50,8 +49,6 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
// --------------静态资源---------------
|
||||
base64Arrow: zStatic.base64Arrow,
|
||||
base64Flower: zStatic.base64Flower,
|
||||
base64BackToTop: zStatic.base64BackToTop,
|
||||
|
||||
// -------------全局数据相关--------------
|
||||
|
|
@ -216,9 +213,12 @@ export default {
|
|||
// #endif
|
||||
this.$nextTick(() => {
|
||||
// 初始化systemInfo
|
||||
this.systemInfo = uni.getSystemInfoSync();
|
||||
this.systemInfo = u.getSystemInfoSync();
|
||||
// 初始化z-paging高度
|
||||
!this.usePageScroll && this.autoHeight && this._setAutoHeight();
|
||||
!this.usePageScroll && this.autoHeight && this._setAutoHeight();
|
||||
// #ifdef MP-KUAISHOU
|
||||
this._setFullScrollViewInHeight();
|
||||
// #endif
|
||||
this.loaded = true;
|
||||
u.delay(() => {
|
||||
// 更新fixed模式下z-paging的布局，主要是更新windowTop、windowBottom
|
||||
|
|
@ -408,10 +408,7 @@ export default {
|
|||
},
|
||||
// 设置z-paging高度
|
||||
async _setAutoHeight(shouldFullHeight = true, scrollViewNode = null) {
|
||||
let heightKey = 'min-height';
|
||||
// #ifndef APP-NVUE
|
||||
heightKey = 'min-height';
|
||||
// #endif
|
||||
const heightKey = 'min-height';
|
||||
try {
|
||||
if (shouldFullHeight) {
|
||||
// 如果需要铺满全屏，则计算当前全屏可是区域的高度
|
||||
|
|
@ -422,7 +419,12 @@ export default {
|
|||
let scrollViewHeight = this.windowHeight - scrollViewTop;
|
||||
scrollViewHeight -= finalScrollBottomNode ? finalScrollBottomNode[0].height : 0;
|
||||
const additionHeight = u.convertToPx(this.autoHeightAddition);
|
||||
const finalHeight = scrollViewHeight + additionHeight - (this.insideMore ? 1 : 0) + 'px !important';
|
||||
// 在支付宝小程序中，添加!important会导致min-height失效，因此在支付宝小程序中需要去掉
|
||||
let importantSuffix = ' !important';
|
||||
// #ifdef MP-ALIPAY
|
||||
importantSuffix = '';
|
||||
// #endif
|
||||
const finalHeight = scrollViewHeight + additionHeight - (this.insideMore ? 1 : 0) + 'px' + importantSuffix;
|
||||
this.$set(this.scrollViewStyle, heightKey, finalHeight);
|
||||
this.$set(this.scrollViewInStyle, heightKey, finalHeight);
|
||||
}
|
||||
|
|
@ -432,6 +434,16 @@ export default {
|
|||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
// #ifdef MP-KUAISHOU
|
||||
// 设置scroll-view内容器的最小高度等于scroll-view的高度(为了解决在快手小程序中内容较少时scroll-view内容器高度无法铺满scroll-view的问题)
|
||||
async _setFullScrollViewInHeight() {
|
||||
try {
|
||||
// 如果需要铺满全屏，则计算当前全屏可是区域的高度
|
||||
const scrollViewNode = await this._getNodeClientRect('.zp-scroll-view');
|
||||
scrollViewNode && this.$set(this.scrollViewInStyle, 'min-height', scrollViewNode[0].height + 'px');
|
||||
} catch (e) {}
|
||||
},
|
||||
// #endif
|
||||
// 组件销毁后续处理
|
||||
_handleUnmounted() {
|
||||
this.active = false;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import c from './z-paging-constant'
|
|||
const storageKey = 'Z-PAGING-REFRESHER-TIME-STORAGE-KEY';
|
||||
let config = null;
|
||||
let configLoaded = false;
|
||||
let cachedSystemInfo = null;
|
||||
const timeoutMap = {};
|
||||
|
||||
// 获取默认配置信息
|
||||
|
|
@ -119,12 +120,41 @@ function convertToPx(text) {
|
|||
text = text.replace('px', '');
|
||||
}
|
||||
if (!isNaN(text)) {
|
||||
if (isRpx) return Number(uni.upx2px(text));
|
||||
if (isRpx) return Number(rpx2px(text));
|
||||
return Number(text);
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
// rpx => px，预留的兼容处理
|
||||
function rpx2px(rpx) {
|
||||
return uni.upx2px(rpx);
|
||||
}
|
||||
|
||||
// 同步获取系统信息，兼容不同平台
|
||||
function getSystemInfoSync(useCache = false) {
|
||||
if (useCache && cachedSystemInfo) {
|
||||
return cachedSystemInfo;
|
||||
}
|
||||
// 目前只用到了deviceInfo、appBaseInfo和windowInfo中的信息，因此仅整合这两个信息数据
|
||||
const infoTypes = ['DeviceInfo', 'AppBaseInfo', 'WindowInfo'];
|
||||
const { deviceInfo, appBaseInfo, windowInfo } = infoTypes.reduce((acc, key) => {
|
||||
const method = `get${key}`;
|
||||
if (uni[method] && uni.canIUse(method)) {
|
||||
acc[key.charAt(0).toLowerCase() + key.slice(1)] = uni[method]();
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
// 如果deviceInfo、appBaseInfo和windowInfo都可以从各自专属的api中获取，则整合它们的数据
|
||||
if (deviceInfo && appBaseInfo && windowInfo) {
|
||||
cachedSystemInfo = { ...deviceInfo, ...appBaseInfo, ...windowInfo };
|
||||
} else {
|
||||
// 使用uni.getSystemInfoSync兜底，确保能获取到最终的系统信息
|
||||
cachedSystemInfo = uni.getSystemInfoSync();
|
||||
}
|
||||
return cachedSystemInfo;
|
||||
}
|
||||
|
||||
// 获取当前时间
|
||||
function getTime() {
|
||||
return (new Date()).getTime();
|
||||
|
|
@ -132,12 +162,12 @@ function getTime() {
|
|||
|
||||
// 获取z-paging实例id，随机生成10位数字+字母
|
||||
function getInstanceId() {
|
||||
const s = [];
|
||||
const hexDigits = "0123456789abcdef";
|
||||
for (let i = 0; i < 10; i++) {
|
||||
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
||||
}
|
||||
return s.join('') + getTime();
|
||||
const s = [];
|
||||
const hexDigits = "0123456789abcdef";
|
||||
for (let i = 0; i < 10; i++) {
|
||||
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
||||
}
|
||||
return s.join('') + getTime();
|
||||
}
|
||||
|
||||
// 等待一段时间
|
||||
|
|
@ -192,8 +222,8 @@ function _handleDefaultConfig() {
|
|||
}
|
||||
// 将config中的短横线写法全部转为驼峰写法，使得读取配置时可以直接通过key去匹配，而非读取每个配置时候再去转，减少不必要的性能开支
|
||||
config = config ? Object.keys(config).reduce((result, key) => {
|
||||
result[_toCamelCase(key)] = config[key];
|
||||
return result;
|
||||
result[_toCamelCase(key)] = config[key];
|
||||
return result;
|
||||
}, {}) : null;
|
||||
configLoaded = true;
|
||||
}
|
||||
|
|
@ -247,7 +277,7 @@ function _toKebab(value) {
|
|||
|
||||
// 短横线转驼峰
|
||||
function _toCamelCase(value) {
|
||||
return value.replace(/-([a-z])/g, (_, group1) => group1.toUpperCase());
|
||||
return value.replace(/-([a-z])/g, (_, group1) => group1.toUpperCase());
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -266,5 +296,7 @@ export default {
|
|||
wait,
|
||||
isPromise,
|
||||
addUnit,
|
||||
deepCopy
|
||||
deepCopy,
|
||||
rpx2px,
|
||||
getSystemInfoSync
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
/ /_____| |_) | (_| | (_| | | | | | (_| |
|
||||
/___| | .__/ \__,_|\__, |_|_| |_|\__, |
|
||||
|_| |___/ |___/
|
||||
v2.7.11 (2024-06-28)
|
||||
by ZXLee
|
||||
v2.8.6 (2025-03-17)
|
||||
@author ZXLee <admin@zxlee.cn>
|
||||
-->
|
||||
<!-- 文档地址：https://z-paging.zxlee.cn -->
|
||||
<!-- github地址：https://github.com/SmileZXLee/uni-z-paging -->
|
||||
<!-- dcloud地址：https://ext.dcloud.net.cn/plugin?id=3935 -->
|
||||
<!-- 反馈QQ群：790460711(已满)、371624008 -->
|
||||
<!-- 反馈QQ群：343409055 -->
|
||||
|
||||
<template name="z-paging">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
|
|
@ -34,7 +34,7 @@ by ZXLee
|
|||
<view :class="{'zp-scroll-view-container':true,'zp-absoulte':finalIsOldWebView}" :style="[scrollViewContainerStyle]">
|
||||
<scroll-view
|
||||
ref="zp-scroll-view" :class="{'zp-scroll-view':true,'zp-scroll-view-absolute':!usePageScroll,'zp-scroll-view-hide-scrollbar':!showScrollbar}" :style="[chatRecordRotateStyle]"
|
||||
:scroll-top="scrollTop" :scroll-x="scrollX"
|
||||
:scroll-top="scrollTop" :scroll-left="scrollLeft" :scroll-x="scrollX"
|
||||
:scroll-y="finalScrollable" :enable-back-to-top="finalEnableBackToTop"
|
||||
:show-scrollbar="showScrollbar" :scroll-with-animation="finalScrollWithAnimation"
|
||||
:scroll-into-view="scrollIntoView" :lower-threshold="finalLowerThreshold" :upper-threshold="5"
|
||||
|
|
@ -77,7 +77,7 @@ by ZXLee
|
|||
<slot v-if="zSlots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
|
||||
<slot v-else-if="zSlots.refresherF2&&refresherStatus===R.GoF2" name="refresherF2" />
|
||||
<z-paging-refresh ref="refresh" v-else-if="!showCustomRefresher" class="zp-custom-refresher-refresh" :style="[{'height': `${finalRefresherThreshold - finalRefresherThresholdPlaceholder}px`}]" :status="refresherStatus"
|
||||
:defaultThemeStyle="finalRefresherThemeStyle" :defaultText="finalRefresherDefaultText"
|
||||
:defaultThemeStyle="finalRefresherThemeStyle" :defaultText="finalRefresherDefaultText" :isIos="isIos"
|
||||
:pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText" :goF2Text="finalRefresherGoF2Text"
|
||||
:defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg" :refreshingAnimated="refresherRefreshingAnimated"
|
||||
:showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
|
||||
|
|
@ -88,15 +88,19 @@ by ZXLee
|
|||
<!-- 全屏Loading -->
|
||||
<slot v-if="showLoading&&zSlots.loading&&!loadingFullFixed" name="loading" />
|
||||
<!-- 主体内容 -->
|
||||
<view class="zp-paging-container-content" :style="[{transform:virtualPlaceholderTopHeight>0?`translateY(${virtualPlaceholderTopHeight}px)`:'none'},finalPagingContentStyle]">
|
||||
<view class="zp-paging-container-content" :style="[finalPlaceholderTopHeightStyle,finalPagingContentStyle]">
|
||||
<!-- #ifdef VUE3 -->
|
||||
<!-- 虚拟列表顶部占位view -->
|
||||
<view v-if="useVirtualList" class="zp-virtual-placeholder" :style="[{height:virtualPlaceholderTopHeight+'px'}]"/>
|
||||
<!-- #endif -->
|
||||
<slot />
|
||||
<!-- 内置列表&虚拟列表 -->
|
||||
<template v-if="finalUseInnerList">
|
||||
<slot name="header"/>
|
||||
<view class="zp-list-container" :style="[innerListStyle]">
|
||||
<template v-if="finalUseVirtualList">
|
||||
<view class="zp-list-cell" :style="[innerCellStyle]" :id="`zp-id-${item[virtualCellIndexKey]}`" v-for="(item,index) in virtualList" :key="item['zp_unique_index']" @click="_innerCellClick(item,virtualTopRangeIndex+index)">
|
||||
<view v-if="useCompatibilityMode">使用兼容模式请在组件源码z-paging.vue第99行中注释这一行，并打开下面一行注释</view>
|
||||
<view class="zp-list-cell" :style="[innerCellStyle]" :id="`${fianlVirtualCellIdPrefix}-${item[virtualCellIndexKey]}`" v-for="(item,index) in virtualList" :key="item['zp_unique_index']" @click="_innerCellClick(item,virtualTopRangeIndex+index)">
|
||||
<view v-if="useCompatibilityMode">使用兼容模式请在组件源码z-paging.vue第103行中注释这一行，并打开下面一行注释</view>
|
||||
<!-- <zp-public-virtual-cell v-if="useCompatibilityMode" :extraData="extraData" :item="item" :index="virtualTopRangeIndex+index" /> -->
|
||||
<slot v-else name="cell" :item="item" :index="virtualTopRangeIndex+index"/>
|
||||
</view>
|
||||
|
|
@ -170,7 +174,7 @@ by ZXLee
|
|||
<!-- 点击返回顶部view -->
|
||||
<view v-if="showBackToTopClass" :class="finalBackToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
|
||||
<slot v-if="zSlots.backToTop" name="backToTop" />
|
||||
<image v-else class="zp-back-to-top-img" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
|
||||
<image v-else class="zp-back-to-top-img" :class="{'zp-back-to-top-img-inversion': useChatRecordMode&&!backToTopImg.length}" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
|
||||
</view>
|
||||
<!-- 全屏Loading(铺满z-paging并固定) -->
|
||||
<view v-if="showLoading&&zSlots.loading&&loadingFullFixed" class="zp-loading-fixed">
|
||||
|
|
@ -209,7 +213,7 @@ by ZXLee
|
|||
<slot v-if="zSlots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
|
||||
<slot v-else-if="zSlots.refresherF2&&refresherStatus===R.GoF2" name="refresherF2" />
|
||||
<slot v-else-if="(nScopedSlots?nScopedSlots:zSlots).refresher" :refresherStatus="refresherStatus" name="refresher" />
|
||||
<z-paging-refresh ref="refresh" v-else :status="refresherStatus" :defaultThemeStyle="finalRefresherThemeStyle"
|
||||
<z-paging-refresh ref="refresh" v-else :status="refresherStatus" :defaultThemeStyle="finalRefresherThemeStyle" :isIos="isIos"
|
||||
:defaultText="finalRefresherDefaultText" :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText" :goF2Text="finalRefresherGoF2Text"
|
||||
:defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg" :refreshingAnimated="refresherRefreshingAnimated"
|
||||
:showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
|
||||
|
|
@ -223,7 +227,7 @@ by ZXLee
|
|||
<slot v-if="zSlots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
|
||||
<slot v-else-if="zSlots.refresherF2&&refresherStatus===R.GoF2" name="refresherF2" />
|
||||
<slot v-else-if="(nScopedSlots?nScopedSlots:$slots).refresher" :refresherStatus="R.Loading" name="refresher" />
|
||||
<z-paging-refresh ref="refresh" v-else :status="R.Loading" :defaultThemeStyle="finalRefresherThemeStyle"
|
||||
<z-paging-refresh ref="refresh" v-else :status="R.Loading" :defaultThemeStyle="finalRefresherThemeStyle" :isIos="isIos"
|
||||
:defaultText="finalRefresherDefaultText" :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText" :goF2Text="finalRefresherGoF2Text"
|
||||
:defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg" :refreshingAnimated="refresherRefreshingAnimated"
|
||||
:showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
|
||||
|
|
@ -261,7 +265,7 @@ by ZXLee
|
|||
</view>
|
||||
</template>
|
||||
|
||||
<view :style="nLoadingMoreFixedHeight?{height:loadingMoreCustomStyle&&loadingMoreCustomStyle.height?loadingMoreCustomStyle.height:'80rpx'}:{}">
|
||||
<view :style="nLoadingMoreFixedHeight?{height:loadingMoreCustomStyle&&loadingMoreCustomStyle.height?loadingMoreCustomStyle.height:loadingMoreFixedHeight}:{}">
|
||||
<slot v-if="showLoadingMoreDefault" name="loadingMoreDefault" />
|
||||
<slot v-else-if="showLoadingMoreLoading" name="loadingMoreLoading" />
|
||||
<slot v-else-if="showLoadingMoreNoMore" name="loadingMoreNoMore" />
|
||||
|
|
@ -280,7 +284,7 @@ by ZXLee
|
|||
@reload="_emptyViewReload" @viewClick="_emptyViewClick" />
|
||||
</view>
|
||||
</component>
|
||||
<component is="header" v-if="!hideNvueBottomTag" ref="zp-n-list-bottom-tag" class="zp-n-list-bottom-tag"></component>
|
||||
<component :is="nViewIs" v-if="!hideNvueBottomTag" ref="zp-n-list-bottom-tag" class="zp-n-list-bottom-tag"></component>
|
||||
</component>
|
||||
<view v-if="zSlots.right" class="zp-page-right">
|
||||
<slot name="right" />
|
||||
|
|
@ -298,7 +302,7 @@ by ZXLee
|
|||
<!-- 点击返回顶部view -->
|
||||
<view v-if="showBackToTopClass" :class="finalBackToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
|
||||
<slot v-if="zSlots.backToTop" name="backToTop" />
|
||||
<image v-else class="zp-back-to-top-img" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
|
||||
<image v-else class="zp-back-to-top-img" :class="{'zp-back-to-top-img-inversion': useChatRecordMode&&!backToTopImg.length}" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
|
||||
</view>
|
||||
<!-- 全屏Loading(铺满z-paging并固定) -->
|
||||
<view v-if="showLoading&&zSlots.loading&&loadingFullFixed" class="zp-loading-fixed">
|
||||
|
|
@ -307,27 +311,211 @@ by ZXLee
|
|||
</component>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
|
||||
<script src="./wxs/z-paging-wxs.wxs" module="pagingWxs" lang="wxs"></script>
|
||||
<!-- #endif -->
|
||||
<script module="pagingRenderjs" lang="renderjs">
|
||||
import pagingRenderjs from './wxs/z-paging-renderjs.js';
|
||||
/**
|
||||
* z-paging 分页组件
|
||||
* @description 高性能，全平台兼容。支持虚拟列表，支持nvue、vue3
|
||||
* @description z-paging 分页组件，高性能，全平台兼容。支持自定义下拉刷新、上拉加载更多、虚拟列表、下拉进入二楼、自动管理空数据图、全自动分页、无闪动聊天分页、本地分页等，也支持作为基本布局容器使用
|
||||
* @tutorial https://z-paging.zxlee.cn
|
||||
* @notice 以下仅为部分常用属性、方法和事件，完整文档请查阅z-paging官网
|
||||
* @property {Number|String} default-page-no 自定义初始的pageNo，默认为1
|
||||
* @property {Number|String} default-page-size 自定义pageSize，默认为10
|
||||
* @property {Object} paging-style 设置z-paging的style，部分平台(如微信小程序)无法直接修改组件的style，可使用此属性代替
|
||||
* @property {Array} value 父组件v-model所绑定的list的值，默认为[]
|
||||
* @property {Number|String} defaultPageNo 自定义初始的pageNo，默认为1
|
||||
* @property {Number|String} defaultPageSize 自定义pageSize(每页显示多少条)，默认为10
|
||||
* @property {Boolean} fixed z-paging是否使用fixed布局，默认为true
|
||||
* @property {Boolean} safeAreaInsetBottom 是否开启底部安全区域适配，默认为false
|
||||
* @property {Boolean} useSafeAreaPlaceholder 开启底部安全区域适配后，是否使用placeholder形式实现，默认为false
|
||||
* @property {Boolean} usePageScroll 使用页面滚动，默认为false
|
||||
* @property {Boolean} autoFullHeight 使用页面滚动时，是否在不满屏时自动填充满屏幕，默认为true
|
||||
* @property {String} defaultThemeStyle loading(下拉刷新、上拉加载更多)的主题样式，支持black，white，默认为black
|
||||
* @property {Object} pagingStyle 设置z-paging的style，部分平台(如微信小程序)无法直接修改组件的style，可使用此属性代替
|
||||
* @property {String} height z-paging的高度，优先级低于pagingStyle中设置的height，传字符串，如100px、100rpx、100%
|
||||
* @property {String} width z-paging的宽度，优先级低于pagingStyle中设置的width，传字符串，如100px、100rpx、100%
|
||||
* @property {Boolean} use-page-scroll 使用页面滚动，默认为否
|
||||
* @property {Boolean} use-virtual-list 是否使用虚拟列表，默认为否
|
||||
* @property {Boolean} fixed z-paging是否使用fixed布局，若使用fixed布局，则z-paging的父view无需固定高度，z-paging高度默认为100%，默认为是(当使用内置scroll-view滚动时有效)
|
||||
* @property {Boolean} auto [z-paging]mounted后是否自动调用reload方法(mounted后自动调用接口)，默认为是
|
||||
* @property {Boolean} use-chat-record-mode 使用聊天记录模式，默认为否
|
||||
* @property {String} maxWidth z-paging的最大宽度，优先级低于pagingStyle中设置的max-width，默认为空
|
||||
* @property {String} bgColor z-paging的背景色(为css中的background，因此也可以设置渐变，背景图片等)，优先级低于pagingStyle中设置的background-color
|
||||
* @property {Boolean} watchTouchDirectionChange 是否监听列表触摸方向改变，默认为false
|
||||
* @property {Number|String} delay 调用complete后延迟处理的时间，单位为毫秒，优先级高于min-delay，默认为0
|
||||
* @property {Number|String} minDelay 触发@query后最小延迟处理的时间，单位为毫秒，优先级低于delay，默认为0
|
||||
* @property {Boolean} callNetworkReject 请求失败是否触发reject，默认为true
|
||||
* @property {String} unit z-paging中默认布局的单位，默认为rpx
|
||||
* @property {Boolean} concat 自动拼接complete中传过来的数组，默认为true
|
||||
* @property {Number|String|Object} dataKey 为保证数据一致，设置当前tab切换时的标识key，并在complete中传递相同key，若二者不一致，则complete将不会生效
|
||||
* @property {String} autowireListName 【极简写法】自动注入的list名，可自动修改父view(包含ref="paging")中对应name的list值
|
||||
* @property {String} autowireQueryName 【极简写法】自动注入的query名，可自动调用父view(包含ref="paging")中的query方法
|
||||
* @property {Function} fetch 【极简写法】获取分页数据Function，功能与@query类似。若设置了fetch则@query将不再触发
|
||||
* @property {Object} fetchParams fetch的附加参数，fetch配置后有效
|
||||
* @property {Boolean} auto [z-paging]mounted后是否自动调用reload方法(mounted后自动调用接口)，默认为true
|
||||
* @property {Boolean} autoScrollToTopWhenReload reload时自动滚动到顶部，默认为true
|
||||
* @property {Boolean} autoCleanListWhenReload reload时立即自动清空原list，默认为true
|
||||
* @property {Boolean} showRefresherWhenReload 列表刷新时自动显示下拉刷新view，默认为false
|
||||
* @property {Boolean} showLoadingMoreWhenReload 列表刷新时自动显示加载更多view，且为加载中状态，默认为false
|
||||
* @property {Boolean} createdReload 组件created时立即触发reload，默认为false
|
||||
* @property {Boolean} refresherEnabled 是否开启下拉刷新，默认为true
|
||||
* @property {Number|String} refresherThreshold 设置自定义下拉刷新阈值，默认单位为px，默认为80rpx
|
||||
* @property {Boolean} useRefresherStatusBarPlaceholder 是否开启下拉刷新状态栏占位，默认为false
|
||||
* @property {Boolean} refresherOnly 是否只使用下拉刷新，默认为false
|
||||
* @property {Boolean} useCustomRefresher 是否使用自定义的下拉刷新，默认为true
|
||||
* @property {Boolean} reloadWhenRefresh 用户下拉刷新时是否触发reload方法，默认为true
|
||||
* @property {String} refresherThemeStyle 下拉刷新的主题样式，支持black，white，默认为black
|
||||
* @property {Object} refresherImgStyle 自定义下拉刷新中左侧图标的样式
|
||||
* @property {Object} refresherTitleStyle 自定义下拉刷新中右侧状态描述文字的样式
|
||||
* @property {Object} refresherUpdateTimeStyle 自定义下拉刷新中右侧最后更新时间文字的样式
|
||||
* @property {Boolean} watchRefresherTouchmove 是否实时监听下拉刷新中进度，并通过@refresherTouchmove传递给父组件，默认为false
|
||||
* @property {Boolean} showRefresherUpdateTime 是否显示最后更新时间，默认为false
|
||||
* @property {String|Object} refresherDefaultText 自定义下拉刷新默认状态下的文字
|
||||
* @property {String|Object} refresherPullingText 自定义下拉刷新松手立即刷新状态下的文字
|
||||
* @property {String|Object} refresherRefreshingText 自定义下拉刷新刷新中状态下的文字
|
||||
* @property {String|Object} refresherCompleteText 自定义下拉刷新刷新结束状态下的文字
|
||||
* @property {String} refresherDefaultImg 自定义下拉刷新默认状态下的图片
|
||||
* @property {String} refresherPullingImg 自定义下拉刷新松手立即刷新状态下的图片
|
||||
* @property {String} refresherRefreshingImg 自定义下拉刷新刷新中状态下的图片
|
||||
* @property {String} refresherCompleteImg 自定义下拉刷新刷新结束状态下的图片
|
||||
* @property {Boolean} refresherRefreshingAnimated 自定义下拉刷新刷新中状态下是否展示旋转动画，默认为true
|
||||
* @property {Boolean} refresherEndBounceEnabled 是否开启自定义下拉刷新刷新结束回弹动画效果，默认为true
|
||||
* @property {String} refresherDefaultStyle 设置系统下拉刷新默认样式，支持设置black，white，none，默认为black
|
||||
* @property {String} refresherBackground 设置自定义下拉刷新区域背景颜色，默认为#FFFFFF00
|
||||
* @property {String} refresherFixedBackground 设置固定的自定义下拉刷新区域背景颜色，默认为#FFFFFF00
|
||||
* @property {Number|String} refresherFixedBacHeight 设置固定的自定义下拉刷新区域高度，默认为0
|
||||
* @property {Number|String} refresherDefaultDuration 设置自定义下拉刷新默认状态下回弹动画时间，单位为毫秒，默认为100
|
||||
* @property {Number|String} refresherCompleteDelay 自定义下拉刷新结束以后延迟收回的时间，单位为毫秒，默认为0
|
||||
* @property {Number|String} refresherCompleteDuration 自定义下拉刷新结束收回动画时间，单位为毫秒，默认为300
|
||||
* @property {Boolean} refresherVibrate 下拉刷新时下拉到“松手立即刷新”状态时是否使手机短振动，默认为false
|
||||
* @property {Boolean} refresherRefreshingScrollable 自定义下拉刷新刷新中状态是否允许列表滚动，默认为true
|
||||
* @property {Boolean} refresherCompleteScrollable 自定义下拉刷新结束状态下是否允许列表滚动，默认为false
|
||||
* @property {Number} refresherOutRate 设置自定义下拉刷新下拉超出阈值后继续下拉位移衰减的比例，默认为0.65
|
||||
* @property {Boolean} refresherF2Enabled 是否开启下拉进入二楼功能，默认为false
|
||||
* @property {Number|String} refresherF2Threshold 下拉进入二楼阈值，默认为200rpx
|
||||
* @property {Number|String} refresherF2Duration 下拉进入二楼动画时间，单位为毫秒，默认为200
|
||||
* @property {Boolean} showRefresherF2 下拉进入二楼状态松手后是否弹出二楼，默认为true
|
||||
* @property {Number} refresherPullRate 设置自定义下拉刷新下拉时实际下拉位移与用户下拉距离的比值，默认为0.75
|
||||
* @property {Number|String} refresherFps 自定义下拉刷新下拉帧率，默认为40
|
||||
* @property {Number|String} refresherMaxAngle 自定义下拉刷新允许触发的最大下拉角度，默认为40度
|
||||
* @property {Boolean} refresherAngleEnableChangeContinued 自定义下拉刷新的角度由未达到最大角度变到达到最大角度时，是否继续下拉刷新手势，默认为false
|
||||
* @property {Boolean} refresherNoTransform 下拉刷新时是否禁止下拉刷新view跟随用户触摸竖直移动，默认为false
|
||||
* @property {Boolean} loadingMoreEnabled 是否启用加载更多数据(含滑动到底部加载更多数据和点击加载更多数据)，默认为true
|
||||
* @property {Number|String} lowerThreshold 距底部/右边多远时，触发scrolltolower事件，默认单位为px，默认为100rpx
|
||||
* @property {Boolean} toBottomLoadingMoreEnabled 是否启用滑动到底部加载更多数据，默认为true
|
||||
* @property {String} loadingMoreThemeStyle 底部加载更多的主题样式，支持black，white，默认为black
|
||||
* @property {Object} loadingMoreCustomStyle 自定义底部加载更多样式
|
||||
* @property {Object} loadingMoreTitleCustomStyle 自定义底部加载更多文字样式
|
||||
* @property {Object} loadingMoreLoadingIconCustomStyle 自定义底部加载更多加载中动画样式
|
||||
* @property {String} loadingMoreLoadingIconType 自定义底部加载更多加载中动画图标类型，可选flower或circle，默认为flower
|
||||
* @property {String} loadingMoreLoadingIconCustomImage 自定义底部加载更多加载中动画图标图片
|
||||
* @property {Boolean} loadingMoreLoadingAnimated 底部加载更多加载中view是否展示旋转动画，默认为true
|
||||
* @property {String|Object} loadingMoreDefaultText 滑动到底部"默认"文字
|
||||
* @property {String|Object} loadingMoreLoadingText 滑动到底部"加载中"文字
|
||||
* @property {String|Object} loadingMoreNoMoreText 滑动到底部"没有更多"文字
|
||||
* @property {String|Object} loadingMoreFailText 滑动到底部"加载失败"文字
|
||||
* @property {Boolean} hideNoMoreInside 当没有更多数据且分页内容未超出z-paging时是否隐藏没有更多数据的view，默认为false
|
||||
* @property {Number} hideNoMoreByLimit 当没有更多数据且分页数组长度少于这个值时，隐藏没有更多数据的view，默认为0
|
||||
* @property {Boolean} insideMore 当分页未满一屏时，是否自动加载更多，默认为false
|
||||
* @property {Boolean} loadingMoreDefaultAsLoading 滑动到底部状态为默认状态时，以加载中的状态展示，默认为false
|
||||
* @property {Boolean} showLoadingMoreNoMoreView 是否显示没有更多数据的view，默认为true
|
||||
* @property {Boolean} showDefaultLoadingMoreText 是否显示默认的加载更多text，默认为true
|
||||
* @property {Boolean} showLoadingMoreNoMoreLine 是否显示没有更多数据的分割线，默认为true
|
||||
* @property {Object} loadingMoreNoMoreLineCustomStyle 自定义底部没有更多数据的分割线样式
|
||||
* @property {Boolean} hideEmptyView 是否强制隐藏空数据图，默认为false
|
||||
* @property {Boolean} emptyViewFixed 空数据图片是否铺满z-paging，默认为false
|
||||
* @property {Boolean} emptyViewCenter 空数据图片是否垂直居中，默认为true
|
||||
* @property {String|Object} emptyViewText 空数据图描述文字
|
||||
* @property {String} emptyViewImg 空数据图图片
|
||||
* @property {String} emptyViewErrorImg 空数据图“加载失败”图片
|
||||
* @property {String|Object} emptyViewReloadText 空数据图点击重新加载文字
|
||||
* @property {String|Object} emptyViewErrorText 空数据图“加载失败”描述文字
|
||||
* @property {Object} emptyViewSuperStyle 空数据图父view样式
|
||||
* @property {Object} emptyViewStyle 空数据图样式
|
||||
* @property {Object} emptyViewImgStyle 空数据图img样式
|
||||
* @property {Object} emptyViewTitleStyle 空数据图描述文字样式
|
||||
* @property {Object} emptyViewReloadStyle 空数据图重新加载按钮样式
|
||||
* @property {Boolean} showEmptyViewReload 是否显示空数据图重新加载按钮(无数据时)，默认为false
|
||||
* @property {Boolean} showEmptyViewReloadWhenError 加载失败时是否显示空数据图重新加载按钮，默认为true
|
||||
* @property {Boolean} autoHideEmptyViewWhenLoading 加载中时是否自动隐藏空数据图，默认为true
|
||||
* @property {Boolean} autoHideEmptyViewWhenPull 用户下拉列表触发下拉刷新加载中时是否自动隐藏空数据图，默认为true
|
||||
* @property {Boolean} autoHideLoadingAfterFirstLoaded 第一次加载后自动隐藏loading slot，默认为true
|
||||
* @property {Boolean} loadingFullFixed loading slot的父view是否铺满屏幕并固定，默认为false
|
||||
* @property {Boolean} autoShowSystemLoading 是否自动显示系统Loading：即uni.showLoading，默认为false
|
||||
* @property {String|Object} systemLoadingText 显示系统Loading时显示的文字
|
||||
* @property {Boolean} systemLoadingMask 显示系统Loading时是否显示透明蒙层，防止触摸穿透，默认为true
|
||||
* @property {Boolean} autoShowBackToTop 自动显示点击返回顶部按钮，默认为false
|
||||
* @property {Number|String} backToTopThreshold 点击返回顶部按钮显示/隐藏的阈值(滚动距离)，默认单位为px，默认为400rpx
|
||||
* @property {String} backToTopImg 点击返回顶部按钮的自定义图片地址
|
||||
* @property {Boolean} backToTopWithAnimate 点击返回顶部按钮返回到顶部时是否展示过渡动画，默认为true
|
||||
* @property {Number|String} backToTopBottom 点击返回顶部按钮与底部的距离，默认单位为px，默认为160rpx
|
||||
* @property {Object} backToTopStyle 点击返回顶部按钮的自定义样式
|
||||
* @property {Boolean} useVirtualList 是否使用虚拟列表，默认为false
|
||||
* @property {Boolean} useCompatibilityMode 在使用虚拟列表时，是否使用兼容模式，默认为false
|
||||
* @property {Object} extraData 使用兼容模式时传递的附加数据
|
||||
* @property {String} cellHeightMode 虚拟列表cell高度模式，默认为fixed
|
||||
* @property {Number|String} preloadPage 预加载的列表可视范围(列表高度)页数，默认为12
|
||||
* @property {Number|String} fixedCellHeight 固定的cell高度，`cell-height-mode=fixed`才有效，默认为空
|
||||
* @property {Number|String} virtualListCol 虚拟列表列数，默认为1
|
||||
* @property {Number|String} virtualScrollFps 虚拟列表scroll取样帧率，默认为80
|
||||
* @property {String} virtualCellIdPrefix 虚拟列表cell id的前缀
|
||||
* @property {Boolean} useInnerList 是否在z-paging内部循环渲染列表(使用内置列表)，默认为false
|
||||
* @property {Boolean} forceCloseInnerList 强制关闭inner-list，默认为false
|
||||
* @property {Boolean} virtualInSwiperSlot 虚拟列表是否使用swiper-item包裹，默认为false
|
||||
* @property {String} cellKeyName 内置列表cell的key名称(仅nvue有效)
|
||||
* @property {Object} innerListStyle innerList样式
|
||||
* @property {Object} innerCellStyle innerCell样式
|
||||
* @property {Number|String} localPagingLoadingTime 本地分页时上拉加载更多延迟时间，单位为毫秒，默认为200
|
||||
* @property {Boolean} useChatRecordMode 使用聊天记录模式，默认为false
|
||||
* @property {Boolean} autoHideKeyboardWhenChat 使用聊天记录模式时是否自动隐藏键盘，默认为true
|
||||
* @property {Boolean} autoAdjustPositionWhenChat 使用聊天记录模式中键盘弹出时是否自动调整slot="bottom"高度，默认为true
|
||||
* @property {Boolean} autoToBottomWhenChat 使用聊天记录模式中键盘弹出时是否自动滚动到底部，默认为false
|
||||
* @property {String} chatAdjustPositionOffset 使用聊天记录模式中键盘弹出时占位高度偏移距离，默认为0px
|
||||
* @property {Boolean} showChatLoadingWhenReload 使用聊天记录模式中`reload`时是否显示`chatLoading`，默认为false
|
||||
* @property {String} bottomBgColor `bottom`的背景色，默认透明
|
||||
* @property {Boolean} chatLoadingMoreDefaultAsLoading 在聊天记录模式中滑动到顶部状态为默认状态时，是否以加载中的状态展示，默认为true
|
||||
* @property {Boolean} showScrollbar 控制是否出现滚动条，默认为true
|
||||
* @property {Boolean} scrollable 是否可以滚动，使用内置scroll-view和nvue时有效，默认为true
|
||||
* @property {Boolean} scrollX 是否允许横向滚动，默认为false
|
||||
* @property {Boolean} scrollToTopBounceEnabled iOS设备上滚动到顶部时是否允许回弹效果，默认为false
|
||||
* @property {Boolean} scrollToBottomBounceEnabled iOS设备上滚动到底部时是否允许回弹效果，默认为true
|
||||
* @property {Boolean} scrollWithAnimation 在设置滚动条位置时使用动画过渡，默认为false
|
||||
* @property {String} scrollIntoView 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
|
||||
* @property {Boolean} enableBackToTop iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，默认为true
|
||||
* @property {String} nvueListIs nvue中修改列表类型，默认为list
|
||||
* @property {Object} nvueWaterfallConfig waterfall配置，仅在nvue中且nvueListIs=waterfall时有效
|
||||
* @property {Boolean} nvueBounce nvue控制是否回弹效果，iOS不支持动态修改，默认为true
|
||||
* @property {Boolean} nvueFastScroll nvue中通过代码滚动到顶部/底部时，是否加快动画效果，默认为false
|
||||
* @property {String} nvueListId nvue中list的id
|
||||
* @property {Boolean} hideNvueBottomTag 是否隐藏nvue列表底部的tagView，默认为false
|
||||
* @property {Boolean} nvuePagingEnabled 设置nvue中是否按分页模式(类似竖向swiper)显示List，默认为false
|
||||
* @property {Number} offsetAccuracy nvue中控制onscroll事件触发的频率，默认为空
|
||||
* @property {Boolean} useCache 是否使用缓存，默认为false
|
||||
* @property {String} cacheKey 使用缓存时缓存的key
|
||||
* @property {String} cacheMode 缓存模式，默认为default
|
||||
* @property {Number} topZIndex slot="top"的view的z-index，默认为99
|
||||
* @property {Number} superContentZIndex z-paging内容容器父view的z-index，默认为1
|
||||
* @property {Number} contentZIndex z-paging内容容器部分的z-index，默认为1
|
||||
* @property {Number} emptyViewZIndex 空数据view的z-index，默认为9
|
||||
* @property {Boolean} autoHeight z-paging是否自动高度，默认为false
|
||||
* @property {Number|String} autoHeightAddition z-paging自动高度时的附加高度，默认为0px
|
||||
* @event {Function} input 父组件v-model所绑定的list的值改变时触发此事件
|
||||
* @event {Function} query 下拉刷新或滚动到底部时会自动触发此方法。z-paging加载时也会触发(若要禁止，请设置:auto="false")。pageNo和pageSize会自动计算好，直接传给服务器即可。
|
||||
* @event {Function} listChange 分页渲染的数组改变时触发
|
||||
* @event {Function} refresherStatusChange 自定义下拉刷新状态改变
|
||||
* @event {Function} refresherTouchstart 自定义下拉刷新下拉开始
|
||||
* @event {Function} refresherTouchmove 自定义下拉刷新下拉拖动中
|
||||
* @event {Function} refresherTouchend 自定义下拉刷新下拉结束
|
||||
* @event {Function} refresherF2Change 下拉进入二楼状态改变
|
||||
* @event {Function} refresh 自定义下拉刷新被触发
|
||||
* @event {Function} restore 自定义下拉刷新被复位
|
||||
* @event {Function} loadingStatusChange 自定义下拉刷新状态改变
|
||||
* @event {Function} emptyViewReload 点击了空数据图中的重新加载按钮
|
||||
* @event {Function} emptyViewClick 点击了空数据图view
|
||||
* @event {Function} isLoadFailedChange z-paging请求失败状态改变
|
||||
* @event {Function} backToTopClick 点击了返回顶部按钮
|
||||
* @event {Function} virtualListChange 虚拟列表当前渲染的数组改变时触发
|
||||
* @event {Function} innerCellClick 使用虚拟列表或内置列表时点击了cell
|
||||
* @event {Function} virtualPlaceholderTopHeight 虚拟列表顶部占位高度改变
|
||||
* @event {Function} hidedKeyboard 在聊天记录模式下，触摸列表隐藏了键盘
|
||||
* @event {Function} keyboardHeightChange 键盘高度改变
|
||||
* @event {Function} scroll z-paging列表滚动时触发
|
||||
* @event {Function} scrollTopChange scrollTop改变时触发
|
||||
* @event {Function} scrolltolower z-paging内置的scroll-view/list-view/waterfall滚动底部时触发
|
||||
* @event {Function} scrolltoupper z-paging内置的scroll-view/list-view/waterfall滚动顶部时触发
|
||||
* @event {Function} scrollend z-paging内置的list滚动结束时触发
|
||||
* @event {Function} contentHeightChanged z-paging中内容高度改变时触发
|
||||
* @event {Function} touchDirectionChange 监听列表触摸方向改变
|
||||
* @example <z-paging ref="paging" v-model="dataList" @query="queryList"></z-paging>
|
||||
*/
|
||||
export default {
|
||||
|
|
@ -337,7 +525,12 @@ by ZXLee
|
|||
// #endif
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="./js/z-paging-main.js" />
|
||||
<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
|
||||
<script src="./wxs/z-paging-wxs.wxs" module="pagingWxs" lang="wxs"></script>
|
||||
<!-- #endif -->
|
||||
|
||||
|
||||
<style scoped>
|
||||
@import "./css/z-paging-main.css";
|
||||
|
|
|
|||
|
|
@ -1,723 +0,0 @@
|
|||
type _Arrayable<T> = T | T[];
|
||||
|
||||
declare global {
|
||||
/**
|
||||
* z-paging返回数据
|
||||
*
|
||||
* @since 2.5.3
|
||||
*/
|
||||
interface ZPagingReturnData<T> {
|
||||
/**
|
||||
* 总列表
|
||||
*/
|
||||
totalList: T[];
|
||||
/**
|
||||
* 是否没有更多数据
|
||||
*/
|
||||
noMore: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 嵌套父容器信息 [list组件](https://uniapp.dcloud.net.cn/component/list.html)
|
||||
*
|
||||
* @since 2.0.4
|
||||
*/
|
||||
interface ZPagingSetSpecialEffectsArgs {
|
||||
/**
|
||||
* 和list同时滚动的组件id，应为外层的scroller
|
||||
*/
|
||||
id?: string;
|
||||
/**
|
||||
* 要吸顶的header顶部距离scroller顶部的距离
|
||||
* - Android暂不支持
|
||||
*
|
||||
* @default 0
|
||||
*/
|
||||
headerHeight?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* z-paging组件实例
|
||||
*/
|
||||
interface ZPagingInstance<T = any> {
|
||||
/**
|
||||
* 重新加载分页数据，pageNo恢复为默认值，相当于下拉刷新的效果
|
||||
*
|
||||
* @param [animate=false] 是否展示下拉刷新动画
|
||||
*/
|
||||
reload: (animate?: boolean) => Promise<ZPagingReturnData<T>>;
|
||||
|
||||
/**
|
||||
* 刷新列表数据，pageNo和pageSize不会重置，列表数据会重新从服务端获取
|
||||
*
|
||||
* @since 2.0.4
|
||||
*/
|
||||
refresh: () => Promise<ZPagingReturnData<T>>;
|
||||
|
||||
/**
|
||||
* 刷新列表数据至指定页
|
||||
*
|
||||
* @since 2.5.9
|
||||
* @param page 目标页数
|
||||
*/
|
||||
refreshToPage: (page: number) => Promise<ZPagingReturnData<T>>;
|
||||
|
||||
/**
|
||||
* 请求结束
|
||||
* - 当通过complete传进去的数组长度小于pageSize时，则判定为没有更多了
|
||||
*
|
||||
* @param [data] 请求结果数组
|
||||
* @param [success=true] 是否请求成功
|
||||
*/
|
||||
complete: (data?: T[] | false, success?: boolean) => Promise<ZPagingReturnData<T>>;
|
||||
|
||||
/**
|
||||
* 请求结束
|
||||
* - 通过total判断是否有更多数据
|
||||
*
|
||||
* @since 2.0.6
|
||||
* @param data 请求结果数组
|
||||
* @param total 列表总长度
|
||||
* @param [success=true] 是否请求成功
|
||||
*/
|
||||
completeByTotal: (data: T[], total: number, success?: boolean) => Promise<ZPagingReturnData<T>>;
|
||||
|
||||
/**
|
||||
* 请求结束
|
||||
* - 自行判断是否有更多数据
|
||||
*
|
||||
* @since 1.9.2
|
||||
* @param data 请求结果数组
|
||||
* @param noMore 是否没有更多数据
|
||||
* @param [success=true] 是否请求成功
|
||||
*/
|
||||
completeByNoMore: (data: T[], noMore: boolean, success?: boolean) => Promise<ZPagingReturnData<T>>;
|
||||
|
||||
/**
|
||||
* 请求失败
|
||||
* - 通过方法传入请求失败原因，将请求失败原因传递给z-paging展示
|
||||
*
|
||||
* @since 2.6.3
|
||||
* @param cause 请求失败原因
|
||||
*/
|
||||
completeByError: (cause: string) => Promise<ZPagingReturnData<T>>;
|
||||
|
||||
/**
|
||||
* 请求结束
|
||||
* - 保证数据一致
|
||||
*
|
||||
* @since 1.6.4
|
||||
* @param data 请求结果数组
|
||||
* @param key dataKey，需与:data-key绑定的一致
|
||||
* @param [success=true] 是否请求成功
|
||||
*/
|
||||
completeByKey: (data: T[], key: string, success?: boolean) => Promise<ZPagingReturnData<T>>;
|
||||
|
||||
/**
|
||||
* 清空分页数据，pageNo恢复为默认值
|
||||
*
|
||||
* @since 2.1.0
|
||||
*/
|
||||
clear: () => void;
|
||||
|
||||
/**
|
||||
* 从顶部添加数据，不会影响分页的pageNo和pageSize
|
||||
*
|
||||
* @param data 需要添加的数据，可以是一条数据或一组数据
|
||||
* @param [scrollToTop=true] 是否滚动到顶部，不填默认为true
|
||||
* @param [animate=true] 是否使用动画滚动到顶部
|
||||
*/
|
||||
addDataFromTop: (data: _Arrayable<T>, scrollToTop?: boolean, animate?: boolean) => void;
|
||||
|
||||
/**
|
||||
* 【不推荐】重新设置列表数据，调用此方法不会影响pageNo和pageSize，也不会触发请求
|
||||
* - 适用场景：当需要删除列表中某一项时，将删除对应项后的数组通过此方法传递给z-paging
|
||||
*
|
||||
* @param data 修改后的列表数组
|
||||
*/
|
||||
resetTotalData: (data: T[]) => void;
|
||||
|
||||
/**
|
||||
* 终止下拉刷新状态
|
||||
*
|
||||
* @since 2.1.0
|
||||
*/
|
||||
endRefresh: () => void;
|
||||
|
||||
/**
|
||||
* 手动更新自定义下拉刷新view高度
|
||||
* - 常用于某些情况下使用slot="refresher"插入的view高度未能正确计算导致异常时手动更新其高度
|
||||
*
|
||||
* @since 2.6.1
|
||||
*/
|
||||
updateCustomRefresherHeight: () => void;
|
||||
|
||||
/**
|
||||
* 手动关闭二楼
|
||||
*
|
||||
* @since 2.7.7
|
||||
*/
|
||||
closeF2: () => void;
|
||||
|
||||
/**
|
||||
* 手动触发上拉加载更多
|
||||
* - 非必须，可依据具体需求使用，例如当z-paging未确定高度时，内部的scroll-view会无限增高，此时z-paging无法得知是否滚动到底部，您可以在页面的onReachBottom中手动调用此方法触发上拉加载更多
|
||||
*
|
||||
* @param [source] 触发加载更多的来源类型
|
||||
*/
|
||||
doLoadMore: (source?: "click" | "toBottom") => void;
|
||||
|
||||
/**
|
||||
* 当使用页面滚动并且自定义下拉刷新时，请在页面的onPageScroll中调用此方法，告知z-paging当前的pageScrollTop，否则会导致在任意位置都可以下拉刷新
|
||||
* - 若引入了mixins，则不需要调用此方法
|
||||
*
|
||||
* @param scrollTop 从page的onPageScroll中获取的scrollTop
|
||||
*/
|
||||
updatePageScrollTop: (scrollTop: number) => void;
|
||||
|
||||
/**
|
||||
* 在使用页面滚动并且设置了slot="top"时，默认初次加载会自动获取其高度，并使内部容器下移，当slot="top"的view高度动态改变时，在其高度需要更新时调用此方法
|
||||
*/
|
||||
updatePageScrollTopHeight: () => void;
|
||||
|
||||
/**
|
||||
* 在使用页面滚动并且设置了slot="bottom"时，默认初次加载会自动获取其高度，并使内部容器下移，当slot="bottom"的view高度动态改变时，在其高度需要更新时调用此方法
|
||||
*/
|
||||
updatePageScrollBottomHeight: () => void;
|
||||
|
||||
/**
|
||||
* 更新slot="left"和slot="right"宽度，当slot="left"或slot="right"宽度动态改变后调用
|
||||
*
|
||||
* @since 2.3.5
|
||||
*/
|
||||
updateLeftAndRightWidth: () => void;
|
||||
|
||||
/**
|
||||
* 更新fixed模式下z-paging的布局，在onShow时候调用，以修复在iOS+h5+tabbar+fixed+底部有安全区域的设备中从tabbar页面跳转到无tabbar页面后返回，底部有一段空白区域的问题
|
||||
*
|
||||
* @since 2.6.5
|
||||
*/
|
||||
updateFixedLayout: () => void;
|
||||
|
||||
/**
|
||||
* 在使用动态高度虚拟列表时，若在列表数组中需要插入某个item，需要调用此方法
|
||||
*
|
||||
* @since 2.5.9
|
||||
* @param item 插入的数据项
|
||||
* @param index 插入的cell位置，若为2，则插入的item在原list的index=1之后，从0开始
|
||||
*/
|
||||
doInsertVirtualListItem: (item: T, index: number) => void;
|
||||
|
||||
/**
|
||||
* 在使用动态高度虚拟列表时，手动更新指定cell的缓存高度
|
||||
* - 当cell高度在初始化之后再次改变时调用
|
||||
*
|
||||
* @since 2.4.0
|
||||
* @param index 需要更新的cell在列表中的位置，从0开始
|
||||
*/
|
||||
didUpdateVirtualListCell: (index: number) => void;
|
||||
|
||||
/**
|
||||
* 在使用动态高度虚拟列表时，若删除了列表数组中的某个item，需要调用此方法以更新高度缓存数组
|
||||
*
|
||||
* @since 2.4.0
|
||||
* @param index 需要更新的cell在列表中的位置，从0开始
|
||||
*/
|
||||
didDeleteVirtualListCell: (index: number) => void;
|
||||
|
||||
/**
|
||||
* 手动触发虚拟列表渲染更新，可用于解决例如修改了虚拟列表数组中元素，但展示未更新的情况
|
||||
*
|
||||
* @since 2.7.10
|
||||
*/
|
||||
updateVirtualListRender: () => void;
|
||||
|
||||
/**
|
||||
* 设置本地分页，请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging作分页处理
|
||||
* - 若调用了此方法，则上拉加载更多时内部会自动分页，不会触发@query所绑定的事件
|
||||
*
|
||||
* @param data 请求结果数组
|
||||
* @param [success=true] 是否请求成功
|
||||
*/
|
||||
setLocalPaging: (data: T[], success?: boolean) => Promise<ZPagingReturnData<T>>;
|
||||
|
||||
/**
|
||||
* 手动触发滚动到顶部加载更多，聊天记录模式时有效
|
||||
*/
|
||||
doChatRecordLoadMore: () => void;
|
||||
|
||||
/**
|
||||
* 添加聊天记录，use-chat-record-mode为true时有效
|
||||
*
|
||||
* @param data 需要添加的聊天数据，可以是一条数据或一组数据
|
||||
* @param [scrollToBottom=true] 是否滚动到底部
|
||||
* @param [animate=true] 是否使用动画滚动到底部
|
||||
*/
|
||||
addChatRecordData: (data: _Arrayable<T>, scrollToBottom?: boolean, animate?: boolean) => void;
|
||||
|
||||
/**
|
||||
* 滚动到顶部
|
||||
*
|
||||
* @param [animate=true] 是否有动画效果
|
||||
*/
|
||||
scrollToTop: (animate?: boolean) => void;
|
||||
|
||||
/**
|
||||
* 滚动到底部
|
||||
*
|
||||
* @param [animate=true] 是否有动画效果
|
||||
*/
|
||||
scrollToBottom: (animate?: boolean) => void;
|
||||
|
||||
/**
|
||||
* 滚动到指定view
|
||||
* - vue中有效，若此方法无效，请使用scrollIntoViewByNodeTop
|
||||
*
|
||||
* @param id 需要滚动到的view的id值，不包含"#"
|
||||
* @param [offset=0] 偏移量，单位为px
|
||||
* @param [animate=false] 是否有动画效果
|
||||
*/
|
||||
scrollIntoViewById: (id: string, offset?: number, animate?: boolean) => void;
|
||||
|
||||
/**
|
||||
* 滚动到指定view
|
||||
* - vue中有效
|
||||
*
|
||||
* @since 1.7.4
|
||||
* @param top 需要滚动的view的top值(通过uni.createSelectorQuery()获取)
|
||||
* @param [offset=0] 偏移量，单位为px
|
||||
* @param [animate=false] 是否有动画效果
|
||||
*/
|
||||
scrollIntoViewByNodeTop: (top: number, offset?: number, animate?: boolean) => void;
|
||||
|
||||
/**
|
||||
* 滚动到指定view
|
||||
* - vue中有效
|
||||
* - 与scrollIntoViewByNodeTop的不同之处在于，scrollToY传入的是view相对于屏幕的top值，而scrollIntoViewByNodeTop传入的top值并非是固定的，通过uni.createSelectorQuery()获取到的top会因列表滚动而改变
|
||||
*
|
||||
* @param top 需要滚动到的view的top值，单位为px
|
||||
* @param [offset=0] 偏移量，单位为px
|
||||
* @param [animate=false] 是否有动画效果
|
||||
*/
|
||||
scrollToY: (top: number, offset?: number, animate?: boolean) => void;
|
||||
|
||||
/**
|
||||
* 滚动到指定view
|
||||
* - nvue或虚拟列表中有效
|
||||
* - 在nvue中的cell必须设置 :ref="`z-paging-${index}`"
|
||||
*
|
||||
* @param index 需要滚动到的view的index(第几个)
|
||||
* @param [offset=0] 偏移量，单位为px
|
||||
* @param [animate=false] 是否有动画效果
|
||||
*/
|
||||
scrollIntoViewByIndex: (index: number, offset?: number, animate?: boolean) => void;
|
||||
|
||||
/**
|
||||
* 滚动到指定view
|
||||
* - nvue中有效
|
||||
*
|
||||
* @param view 需要滚动到的view(通过this.$refs.xxx获取)
|
||||
* @param [offset=0] 偏移量，单位为px
|
||||
* @param [animate=false] 是否有动画效果
|
||||
*/
|
||||
scrollIntoViewByView: (view: any, offset?: number, animate?: boolean) => void;
|
||||
|
||||
/**
|
||||
* 设置nvue List的specialEffects
|
||||
*
|
||||
* @since 2.0.4
|
||||
* @param args 参见https://uniapp.dcloud.io/component/list?id=listsetspecialeffects
|
||||
*/
|
||||
setSpecialEffects: (args: ZPagingSetSpecialEffectsArgs) => void;
|
||||
|
||||
/**
|
||||
* 与{@link setSpecialEffects}相同
|
||||
*
|
||||
* @since 2.0.4
|
||||
*/
|
||||
setListSpecialEffects: (args: ZPagingSetSpecialEffectsArgs) => void;
|
||||
|
||||
/**
|
||||
* 手动更新列表缓存数据，将自动截取v-model绑定的list中的前pageSize条覆盖缓存，请确保在list数据更新到预期结果后再调用此方法
|
||||
*
|
||||
* @since 2.3.9
|
||||
*/
|
||||
updateCache: () => void;
|
||||
|
||||
/**
|
||||
* 获取当前版本号
|
||||
*/
|
||||
getVersion: () => string;
|
||||
}
|
||||
|
||||
/**
|
||||
* z-paging全局数据
|
||||
* - uni.$zp
|
||||
*
|
||||
* @since 2.6.5
|
||||
*/
|
||||
interface ZPagingGlobal {
|
||||
/**
|
||||
* 配置
|
||||
*/
|
||||
config: Record<string, any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 虚拟列表数据项
|
||||
*
|
||||
* @since 2.7.7
|
||||
*/
|
||||
type ZPagingVirtualItem<T> = T & {
|
||||
/**
|
||||
* 元素真实索引
|
||||
*/
|
||||
zp_index: number;
|
||||
};
|
||||
|
||||
namespace ZPagingEvent {
|
||||
/**
|
||||
* query的触发来源：0.用户主动下拉刷新 1.通过reload触发 2.通过refresh触发 3.通过滚动到底部加载更多或点击底部加载更多触发
|
||||
*/
|
||||
type _QueryFrom = 0 | 1 | 2 | 3;
|
||||
/**
|
||||
* 下拉刷新或滚动到底部时会自动触发此方法
|
||||
*
|
||||
* @param pageNo 当前第几页
|
||||
* @param pageSize 每页多少条
|
||||
* @param from query的触发来源：0.用户主动下拉刷新 1.通过reload触发 2.通过refresh触发 3.通过滚动到底部加载更多或点击底部加载更多触发
|
||||
*/
|
||||
interface Query {
|
||||
(pageNo: number, pageSize: number, from: _QueryFrom): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页渲染的数组改变时触发
|
||||
*
|
||||
* @param list 最终的分页数据数组
|
||||
*/
|
||||
interface ListChange {
|
||||
(list: []): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉刷新状态：0-默认状态 1.松手立即刷新 2.刷新中 3.刷新成功(默认情况下看不到此状态，如果需要展示刷新成功状态，请设置刷新结束以后延时收回的时间，如:refresher-complete-delay="200")
|
||||
*/
|
||||
type _RefresherStatus = 0 | 1 | 2 | 3;
|
||||
/**
|
||||
* 自定义下拉刷新状态改变
|
||||
* - use-custom-refresher为false时无效
|
||||
*
|
||||
* @param status 下拉刷新状态：0-默认状态 1.松手立即刷新 2.刷新中 3.刷新成功(默认情况下看不到此状态，如果需要展示刷新成功状态，请设置刷新结束以后延时收回的时间，如:refresher-complete-delay="200")
|
||||
*/
|
||||
interface RefresherStatusChange {
|
||||
(status: _RefresherStatus): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义下拉刷新下拉开始
|
||||
* - use-custom-refresher为false时无效，nvue无效
|
||||
*
|
||||
* @param y 当前触摸开始的屏幕点的y值(单位px)
|
||||
*/
|
||||
interface RefresherTouchstart {
|
||||
(y: number): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* touchmove信息
|
||||
*/
|
||||
interface _RefresherTouchmoveInfo {
|
||||
/** 下拉的距离 */
|
||||
pullingDistance: number;
|
||||
/** 前后两次回调滑动距离的差值 */
|
||||
dy: number;
|
||||
/** refresh组件高度 */
|
||||
viewHeight: number;
|
||||
/** pullingDistance/viewHeight的比值 */
|
||||
rate: number;
|
||||
}
|
||||
/**
|
||||
* 自定义下拉刷新下拉拖动中
|
||||
* - use-custom-refresher为false时无效
|
||||
* - 在使用wxs的平台上，为减少wxs与js通信折损，只有在z-paging添加@refresherTouchmove时，wxs才会实时将下拉拖动事件传给js，在微信小程序和QQ小程序中，因$listeners无效，所以必须设置:watch-refresher-touchmove="true"方可使此事件被触发
|
||||
*
|
||||
* @param info touchmove信息
|
||||
*/
|
||||
interface RefresherTouchmove {
|
||||
(info: _RefresherTouchmoveInfo): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义下拉刷新下拉结束
|
||||
* - use-custom-refresher为false时无效，nvue无效
|
||||
*
|
||||
* @param y 当前触摸开始的屏幕点的y值(单位px)
|
||||
*/
|
||||
interface RefresherTouchend {
|
||||
(y: number): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉进入二楼状态：go-二楼开启 close-二楼关闭
|
||||
*/
|
||||
type _RefresherF2ChangeStatus = 'go' | 'close';
|
||||
/**
|
||||
* 下拉进入二楼状态改变
|
||||
*
|
||||
* @since 2.7.7
|
||||
* @param status 下拉进入二楼状态：go-二楼开启 close-二楼关闭
|
||||
*/
|
||||
interface RefresherF2Change {
|
||||
(status: _RefresherF2ChangeStatus): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义下拉刷新被触发
|
||||
*/
|
||||
interface OnRefresh {
|
||||
(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义下拉刷新被复位
|
||||
*/
|
||||
interface OnRestore {
|
||||
(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 底部加载更多状态：0-默认状态 1.加载中 2.没有更多数据 3.加载失败
|
||||
*/
|
||||
type _LoadingStatus = 0 | 1 | 2 | 3;
|
||||
/**
|
||||
* 下拉进入二楼状态改变
|
||||
*
|
||||
* @param status 底部加载更多状态：0-默认状态 1.加载中 2.没有更多数据 3.加载失败
|
||||
*/
|
||||
interface LoadingStatusChange {
|
||||
(status: _LoadingStatus): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击空数据图中重新加载后是否进行reload操作，默认为是。如果需要禁止reload事件，则调用handler(false)
|
||||
*/
|
||||
type _EmptyViewReloadHandler = (value: boolean) => void;
|
||||
/**
|
||||
* 点击了空数据图中的重新加载按钮
|
||||
*
|
||||
* @since 1.8.0
|
||||
* @param handler 点击空数据图中重新加载后是否进行reload操作，默认为是。如果需要禁止reload事件，则调用handler(false)
|
||||
*/
|
||||
interface EmptyViewReload {
|
||||
(handler: _EmptyViewReloadHandler): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击了空数据图view
|
||||
*
|
||||
* @since 2.3.3
|
||||
*/
|
||||
interface EmptyViewClick {
|
||||
(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 请求失败状态改变
|
||||
*
|
||||
* @since 2.5.0
|
||||
* @param isLoadFailed 当前是否是请求失败状态，为true代表是，反之为否；默认状态为否
|
||||
*/
|
||||
interface IsLoadFailedChange {
|
||||
(isLoadFailed: boolean): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击返回顶部按钮后是否滚动到顶部，默认为是。如果需要禁止滚动到顶部事件，则调用handler(false)
|
||||
*/
|
||||
type _BackToTopClickHandler = (value: boolean) => void;
|
||||
/**
|
||||
* 点击了返回顶部按钮
|
||||
*
|
||||
* @since 2.6.1
|
||||
* @param handler 点击返回顶部按钮后是否滚动到顶部，默认为是。如果需要禁止滚动到顶部事件，则调用handler(false)
|
||||
*/
|
||||
interface BackToTopClick {
|
||||
(handler: _BackToTopClickHandler): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 虚拟列表当前渲染的数组改变时触发，在虚拟列表中只会渲染可见区域内+预加载页面的数据
|
||||
* -nvue无效
|
||||
*
|
||||
* @since 2.2.7
|
||||
* @param list 虚拟列表当前渲染的数组
|
||||
*/
|
||||
interface VirtualListChange {
|
||||
(list: []): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用虚拟列表或内置列表时点击了cell的信息
|
||||
*/
|
||||
interface _InnerCellClickInfo<T> {
|
||||
/** 当前点击的item */
|
||||
item: T;
|
||||
/** 当前点击的index */
|
||||
index: number;
|
||||
}
|
||||
/**
|
||||
* 使用虚拟列表或内置列表时点击了cell
|
||||
* -nvue无效
|
||||
*
|
||||
* @since 2.4.0
|
||||
* @param info 点击cell的信息
|
||||
*/
|
||||
interface InnerCellClick {
|
||||
(info: _InnerCellClickInfo<any>): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 在聊天记录模式下，触摸列表隐藏了键盘
|
||||
*
|
||||
* @since 2.3.6
|
||||
*/
|
||||
interface HidedKeyboard {
|
||||
(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 键盘的高度信息
|
||||
*/
|
||||
interface _KeyboardHeightInfo {
|
||||
/** 键盘的高度 */
|
||||
height: number;
|
||||
}
|
||||
/**
|
||||
* 键盘高度改变
|
||||
* -聊天记录模式启用时才有效，如果在聊天记录模式页面需要监听键盘高度改变，请不要直接通过uni.onKeyboardHeightChange监听，否则可能导致z-paging内置的键盘高度改变监听失效。ps:H5、百度小程序、抖音小程序、飞书小程序不支持
|
||||
*
|
||||
* @since 2.7.1
|
||||
* @param info 键盘高度信息
|
||||
*/
|
||||
interface KeyboardHeightChange {
|
||||
(info: _KeyboardHeightInfo): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 列表滚动信息(vue)
|
||||
*/
|
||||
interface _ScrollInfo {
|
||||
detail: {
|
||||
scrollLeft: number;
|
||||
scrollTop: number;
|
||||
scrollHeight: number;
|
||||
scrollWidth: number;
|
||||
deltaX: number;
|
||||
deltaY: number;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 列表滚动信息(nvue)
|
||||
*/
|
||||
interface _ScrollInfoN {
|
||||
contentSize: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
contentOffset: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
isDragging: boolean;
|
||||
}
|
||||
/**
|
||||
* 列表滚动时触发
|
||||
*
|
||||
* @param event 滚动事件信息，vue使用_ScrollInfo，nvue使用_ScrollInfoN
|
||||
*/
|
||||
interface Scroll {
|
||||
(event: _ScrollInfo | _ScrollInfoN): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* scrollTop改变时触发，使用点击返回顶部时需要获取scrollTop时可使用此事件
|
||||
*
|
||||
* @param scrollTop
|
||||
*/
|
||||
interface ScrollTopChange {
|
||||
(scrollTop: number): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 内置的scroll-view滚动底部时的来源(toBottom滚动到底部；click点击了加载更多view)
|
||||
*/
|
||||
type _ScrolltolowerFrom = 'toBottom' | 'click';
|
||||
/**
|
||||
* 内置的scroll-view滚动底部时触发
|
||||
*
|
||||
* @param from 来源(toBottom滚动到底部；click点击了加载更多view)
|
||||
*/
|
||||
interface Scrolltolower {
|
||||
(from: _ScrolltolowerFrom): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 内置的scroll-view滚动顶部时触发
|
||||
*/
|
||||
interface Scrolltoupper {
|
||||
(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 滚动结束时触发事件信息
|
||||
*/
|
||||
interface _ScrollendEvent {
|
||||
contentSize: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
contentOffset: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
isDragging: boolean;
|
||||
}
|
||||
/**
|
||||
* 内置的list滚动结束时触发
|
||||
* -仅nvue有效
|
||||
*
|
||||
* @since 2.7.3
|
||||
* @param event 滚动结束时触发事件信息
|
||||
*/
|
||||
interface Scrollend {
|
||||
(event: _ScrollendEvent): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* z-paging中内容高度改变时触发
|
||||
*
|
||||
* @since 2.1.3
|
||||
* @param height 改变后的高度
|
||||
*/
|
||||
interface ContentHeightChanged {
|
||||
(height: number): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 列表触摸的方向，top代表用户将列表向上移动(scrollTop不断减小)，bottom代表用户将列表向下移动(scrollTop不断增大)
|
||||
*/
|
||||
type _TouchDirection = 'top' | 'bottom';
|
||||
/**
|
||||
* 监听列表触摸方向改变
|
||||
*
|
||||
* @since 2.3.0
|
||||
* @param direction 列表触摸的方向，top代表用户将列表向上移动(scrollTop不断减小)，bottom代表用户将列表向下移动(scrollTop不断增大)
|
||||
*/
|
||||
interface TouchDirectionChange {
|
||||
(direction: _TouchDirection): void;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
"id": "z-paging",
|
||||
"name": "z-paging",
|
||||
"displayName": "【z-paging下拉刷新、上拉加载】高性能，全平台兼容。支持虚拟列表，分页全自动处理",
|
||||
"version": "2.7.11",
|
||||
"description": "超简单、低耦合！使用wxs+renderjs实现。支持自定义下拉刷新、上拉加载更多、虚拟列表、下拉进入二楼、自动管理空数据图、无闪动聊天分页、本地分页、国际化等100+项配置",
|
||||
"version": "2.8.6",
|
||||
"description": "超简单、低耦合！使用wxs+renderjs实现。支持自定义下拉刷新、上拉加载更多、虚拟列表、下拉进入二楼、自动管理空数据图、无闪动聊天分页、本地分页、国际化等数百项配置",
|
||||
"keywords": [
|
||||
"下拉刷新",
|
||||
"上拉加载",
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
"虚拟列表"
|
||||
],
|
||||
"repository": "https://github.com/SmileZXLee/uni-z-paging",
|
||||
"types": "global.d.ts",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.0.7"
|
||||
},
|
||||
|
|
@ -47,8 +46,10 @@
|
|||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y",
|
||||
"app-harmony": "u",
|
||||
"app-uvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<img alt="logo" src="https://z-paging.zxlee.cn/img/title-logo.png" height="100" style="margin-bottom: 50px;" />
|
||||
</p>
|
||||
|
||||
[](https://github.com/SmileZXLee/uni-z-paging) [](https://en.wikipedia.org/wiki/MIT_License)
|
||||
[](https://github.com/SmileZXLee/uni-z-paging) [](https://en.wikipedia.org/wiki/MIT_License)
|
||||
<img height="0" width="0" src="https://api.z-notify.zxlee.cn/v1/public/statistics/8293556910106066944/addOnly?from=uni" />
|
||||
|
||||
`z-paging-x`现已支持uniapp x，持续完善中，插件地址👉🏻 [https://ext.dcloud.net.cn/plugin?name=z-paging-x](https://ext.dcloud.net.cn/plugin?name=z-paging-x)
|
||||
|
|
@ -19,14 +19,15 @@
|
|||
* 【低耦合，低侵入】分页自动管理。在page中无需处理任何分页相关逻辑，无需在data中定义任何分页相关变量，全由z-paging内部处理。
|
||||
* 【超灵活，支持各种类型自定义】支持自定义下拉刷新，自定义上拉加载更多等各种自定义效果；支持使用内置自动分页，同时也支持通过监听下拉刷新和滚动到底部事件自行处理；支持使用自带全屏布局规范，同时也支持将z-paging自由放在任意容器中。
|
||||
* 【功能丰富】支持国际化，支持自定义且自动管理空数据图，支持主题模式切换，支持本地分页，支持无闪动聊天分页模式，支持展示最后更新时间，支持吸顶效果，支持内部scroll-view滚动与页面滚动，支持一键滚动到顶部，支持下拉进入二楼等诸多功能。
|
||||
* 【全平台兼容】支持vue、nvue，vue2、vue3，支持h5、app及各家小程序。
|
||||
* 【高性能】在app-vue、h5、微信小程序、QQ小程序上使用wxs+renderjs从视图层实现下拉刷新；支持虚拟列表，轻松渲染万级数据！
|
||||
* 【【全平台兼容】支持vue&nvue，vue2&vue3，js&ts，支持h5、app、鸿蒙Next及各家小程序。
|
||||
* 【高性能】在app-vue、h5、微信小程序、QQ小程序上使用wxs+renderjs在视图层实现下拉刷新；支持虚拟列表，轻松渲染百万级列表数据！
|
||||
|
||||
***
|
||||
### 反馈qq群
|
||||
* 官方1群`已满`：[790460711](https://jq.qq.com/?_wv=1027&k=vU2fKZZH)
|
||||
|
||||
* 官方2群：[371624008](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=avPmibADf2TNi4LxkIwjCE5vbfXpa-r1&authKey=dQ%2FVDAR87ONxI4b32Py%2BvmXbhnopjHN7%2FJPtdsqJdsCPFZB6zDQ17L06Uh0kITUZ&noverify=0&group_code=371624008)
|
||||
* 官方2群`已满`：[371624008](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=avPmibADf2TNi4LxkIwjCE5vbfXpa-r1&authKey=dQ%2FVDAR87ONxI4b32Py%2BvmXbhnopjHN7%2FJPtdsqJdsCPFZB6zDQ17L06Uh0kITUZ&noverify=0&group_code=371624008)
|
||||
* 官方3群：[343409055](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=sIaNqiCMIjxGQVksjytCw6R8DSiibHR7&authKey=pp995q8ZzFtl5F2xUwvvceP24QTcguWW%2FRVoDnMa8JZF4L2DmS%2B%2FV%2F5sYrcgPsmW&noverify=0&group_code=343409055)
|
||||
|
||||
***
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
['z-paging']: typeof import('./comps/z-paging')['ZPaging']
|
||||
['z-paging-swiper']: typeof import('./comps/z-paging-swiper')['ZPagingSwiper']
|
||||
['z-paging-swiper-item']: typeof import('./comps/z-paging-swiper-item')['ZPagingSwiperItem']
|
||||
['z-paging-empty-view']: typeof import('./comps/z-paging-empty-view')['ZPagingEmptyView']
|
||||
['z-paging-cell']: typeof import('./comps/z-paging-cell')['ZPagingCell']
|
||||
}
|
||||
}
|
||||
|
||||
export {}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export interface AllowedComponentProps {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
}
|
||||
|
||||
export interface VNodeProps {
|
||||
key?: string | number | symbol;
|
||||
ref?: unknown;
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { AllowedComponentProps, VNodeProps } from './_common'
|
||||
|
||||
// ****************************** Props ******************************
|
||||
declare interface ZPagingCellProps {
|
||||
/**
|
||||
* z-paging-cell样式
|
||||
*/
|
||||
cellStyle?: Record<string, any>
|
||||
}
|
||||
|
||||
// ****************************** Slots ******************************
|
||||
declare interface ZPagingCellSlots {
|
||||
// ******************** 主体布局Slot ********************
|
||||
/**
|
||||
* 默认插入的view
|
||||
*/
|
||||
['default']?: () => any
|
||||
}
|
||||
|
||||
declare interface _ZPagingCell {
|
||||
new (): {
|
||||
$props: AllowedComponentProps &
|
||||
VNodeProps &
|
||||
ZPagingCellProps
|
||||
$slots: ZPagingCellSlots
|
||||
}
|
||||
}
|
||||
|
||||
export declare const ZPagingCell: _ZPagingCell
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import { AllowedComponentProps, VNodeProps } from './_common'
|
||||
|
||||
// ****************************** Props ******************************
|
||||
declare interface ZPagingEmptyViewProps {
|
||||
/**
|
||||
* 空数据图片是否铺满z-paging，默认为是。若设置为否，则为填充满z-paging的剩余部分
|
||||
* @default false
|
||||
* @since 2.0.3
|
||||
*/
|
||||
emptyViewFixed?: boolean;
|
||||
|
||||
/**
|
||||
* 空数据图描述文字
|
||||
* @default "没有数据哦~"
|
||||
*/
|
||||
emptyViewText?: string;
|
||||
|
||||
/**
|
||||
* 空数据图图片，默认使用z-paging内置的图片
|
||||
* - 建议使用绝对路径，开头不要添加"@"，请以"/"开头
|
||||
*/
|
||||
emptyViewImg?: string;
|
||||
|
||||
/**
|
||||
* 空数据图点击重新加载文字
|
||||
* @default "重新加载"
|
||||
* @since 1.6.7
|
||||
*/
|
||||
emptyViewReloadText?: string;
|
||||
|
||||
/**
|
||||
* 空数据图样式，可设置空数据view的top等
|
||||
* - 如果空数据图不是fixed布局，则此处是`margin-top`
|
||||
*/
|
||||
emptyViewStyle?: Record<string, any>;
|
||||
|
||||
/**
|
||||
* 空数据图img样式
|
||||
*/
|
||||
emptyViewImgStyle?: Record<string, any>;
|
||||
|
||||
/**
|
||||
* 空数据图描述文字样式
|
||||
*/
|
||||
emptyViewTitleStyle?: Record<string, any>;
|
||||
|
||||
/**
|
||||
* 空数据图重新加载按钮样式
|
||||
* @since 1.6.7
|
||||
*/
|
||||
emptyViewReloadStyle?: Record<string, any>;
|
||||
|
||||
/**
|
||||
* 是否显示空数据图重新加载按钮(无数据时)
|
||||
* @default false
|
||||
* @since 1.6.7
|
||||
*/
|
||||
showEmptyViewReload?: boolean;
|
||||
|
||||
/**
|
||||
* 是否是加载失败
|
||||
* @default false
|
||||
*/
|
||||
isLoadFailed?: boolean;
|
||||
|
||||
/**
|
||||
* 空数据图中布局的单位
|
||||
* @default 'rpx'
|
||||
* @since 2.6.7
|
||||
*/
|
||||
unit?: 'rpx' | 'px';
|
||||
|
||||
// ****************************** Events ******************************
|
||||
/**
|
||||
* 点击了重新加载按钮
|
||||
*/
|
||||
onReload?: () => void
|
||||
|
||||
/**
|
||||
* 点击了空数据view
|
||||
* @since 2.3.3
|
||||
*/
|
||||
onViewClick?: () => void
|
||||
}
|
||||
|
||||
declare interface _ZPagingEmptyView {
|
||||
new (): {
|
||||
$props: AllowedComponentProps &
|
||||
VNodeProps &
|
||||
ZPagingEmptyViewProps
|
||||
}
|
||||
}
|
||||
|
||||
export declare const ZPagingEmptyView: _ZPagingEmptyView
|
||||
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import { AllowedComponentProps, VNodeProps } from './_common'
|
||||
|
||||
// ****************************** Props ******************************
|
||||
declare interface ZPagingSwiperItemProps {
|
||||
/**
|
||||
* 当前组件的index，也就是当前组件是swiper中的第几个
|
||||
* @default 0
|
||||
*/
|
||||
tabIndex?: number
|
||||
|
||||
/**
|
||||
* 当前swiper切换到第几个index
|
||||
* @default 0
|
||||
*/
|
||||
currentIndex?: number
|
||||
|
||||
/**
|
||||
* 是否使用虚拟列表。使用页面滚动或nvue时，不支持虚拟列表。在nvue中z-paging内置了list组件，效果与虚拟列表类似，并且可以提供更好的性能。
|
||||
* @default false
|
||||
*/
|
||||
useVirtualList?: boolean
|
||||
|
||||
/**
|
||||
* 虚拟列表cell高度模式，默认为`fixed`，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。
|
||||
* @default 'fixed'
|
||||
*/
|
||||
cellHeightMode?: 'fixed' | 'dynamic'
|
||||
|
||||
/**
|
||||
* 预加载的列表可视范围(列表高度)页数。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题。
|
||||
* @default 12
|
||||
*/
|
||||
preloadPage?: number | string
|
||||
|
||||
/**
|
||||
* 虚拟列表列数，默认为1。常用于每行有多列的情况，例如每行有2列数据，需要将此值设置为2。
|
||||
* @default 1
|
||||
* @since 2.2.8
|
||||
*/
|
||||
virtualListCol?: number | string
|
||||
|
||||
/**
|
||||
* 虚拟列表scroll取样帧率，默认为80，过低容易出现白屏问题，过高容易出现卡顿问题
|
||||
* @default 80
|
||||
*/
|
||||
virtualScrollFps?: number | string
|
||||
|
||||
/**
|
||||
* 是否在z-paging内部循环渲染列表(使用内置列表)。
|
||||
* @default false
|
||||
*/
|
||||
useInnerList?: boolean
|
||||
|
||||
/**
|
||||
* 内置列表cell的key名称(仅nvue有效，在nvue中开启use-inner-list时必须填此项)
|
||||
* @since 2.2.7
|
||||
*/
|
||||
cellKeyName?: string
|
||||
|
||||
/**
|
||||
* innerList样式
|
||||
*/
|
||||
innerListStyle?: Record<string, any>
|
||||
}
|
||||
|
||||
// ****************************** Methods ******************************
|
||||
declare interface _ZPagingSwiperItemRef {
|
||||
/**
|
||||
* 重新加载分页数据，pageNo恢复为默认值，相当于下拉刷新的效果
|
||||
*
|
||||
* @param [animate=false] 是否展示下拉刷新动画
|
||||
*/
|
||||
reload: (animate?: boolean) => void;
|
||||
|
||||
/**
|
||||
* 请求结束
|
||||
* - 当通过complete传进去的数组长度小于pageSize时，则判定为没有更多了
|
||||
*
|
||||
* @param [data] 请求结果数组
|
||||
* @param [success=true] 是否请求成功
|
||||
*/
|
||||
complete: (data?: any[] | false, success?: boolean) => void;
|
||||
}
|
||||
|
||||
declare interface _ZPagingSwiperItem {
|
||||
new (): {
|
||||
$props: AllowedComponentProps &
|
||||
VNodeProps &
|
||||
ZPagingSwiperItemProps
|
||||
}
|
||||
}
|
||||
|
||||
export declare const ZPagingSwiperItem: _ZPagingSwiperItem
|
||||
|
||||
export declare const ZPagingSwiperItemRef: _ZPagingSwiperItemRef
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import { AllowedComponentProps, VNodeProps } from './_common'
|
||||
|
||||
// ****************************** Props ******************************
|
||||
declare interface ZPagingSwiperProps {
|
||||
/**
|
||||
* 是否使用fixed布局，若使用fixed布局，则z-paging-swiper的父view无需固定高度，z-paging高度默认铺满屏幕，页面中的view请放z-paging-swiper标签内，需要固定在顶部的view使用slot="top"包住，需要固定在底部的view使用slot="bottom"包住。
|
||||
* @default true
|
||||
*/
|
||||
fixed?: boolean
|
||||
|
||||
/**
|
||||
* 是否开启底部安全区域适配
|
||||
* @default false
|
||||
*/
|
||||
safeAreaInsetBottom?: boolean
|
||||
|
||||
/**
|
||||
* z-paging-swiper样式
|
||||
*/
|
||||
swiperStyle?: Record<string, any>
|
||||
}
|
||||
|
||||
|
||||
// ****************************** Slots ******************************
|
||||
declare interface ZPagingSwiperSlots {
|
||||
// ******************** 主体布局Slot ********************
|
||||
/**
|
||||
* 默认插入的view
|
||||
*/
|
||||
['default']?: () => any
|
||||
|
||||
/**
|
||||
* 可以将自定义导航栏、tab-view等需要固定的(不需要跟着滚动的)元素放入slot="top"的view中。
|
||||
* 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="top"。需要固定在顶部的view请勿设置position: fixed;
|
||||
* @since 1.5.5
|
||||
*/
|
||||
['top']?: () => any
|
||||
|
||||
/**
|
||||
* 可以将需要固定在底部的(不需要跟着滚动的)元素放入slot="bottom"的view中。
|
||||
* 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="bottom"。需要固定在底部的view请勿设置position: fixed;
|
||||
* @since 1.6.2
|
||||
*/
|
||||
['bottom']?: () => any
|
||||
|
||||
/**
|
||||
* 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="left"的view中。
|
||||
* 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="left"。需要固定在左侧的view请勿设置position: fixed;
|
||||
* @since 2.2.3
|
||||
*/
|
||||
['left']?: () => any
|
||||
|
||||
/**
|
||||
* 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="right"的view中。
|
||||
* 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="right"。需要固定在右侧的view请勿设置position: fixed;
|
||||
* @since 2.2.3
|
||||
*/
|
||||
['right']?: () => any
|
||||
}
|
||||
|
||||
// ****************************** Methods ******************************
|
||||
declare interface _ZPagingSwiperRef {
|
||||
/**
|
||||
* 更新slot="left"和slot="right"宽度，当slot="left"或slot="right"宽度动态改变后调用
|
||||
*
|
||||
* @since 2.3.5
|
||||
*/
|
||||
updateLeftAndRightWidth: () => void;
|
||||
|
||||
/**
|
||||
* 更新fixed模式下z-paging-swiper的布局，在onShow时候调用，以修复在iOS+h5+tabbar+fixed+底部有安全区域的设备中从tabbar页面跳转到无tabbar页面后返回，底部有一段空白区域的问题
|
||||
*
|
||||
* @since 2.6.5
|
||||
*/
|
||||
updateFixedLayout: () => void;
|
||||
}
|
||||
|
||||
declare interface _ZPagingSwiper {
|
||||
new (): {
|
||||
$props: AllowedComponentProps &
|
||||
VNodeProps &
|
||||
ZPagingSwiperProps
|
||||
$slots: ZPagingSwiperSlots
|
||||
}
|
||||
}
|
||||
|
||||
export declare const ZPagingSwiper: _ZPagingSwiper
|
||||
|
||||
export declare const ZPagingSwiperRef: _ZPagingSwiperRef
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,24 @@
|
|||
/// <reference path="./comps.d.ts" />
|
||||
declare module 'z-paging' {
|
||||
export function install() : void
|
||||
/**
|
||||
* z-paging全局配置
|
||||
* - uni.$zp
|
||||
*
|
||||
* @since 2.6.5
|
||||
*/
|
||||
interface $zp {
|
||||
/**
|
||||
* 全局配置
|
||||
*/
|
||||
config : Record<string, any>;
|
||||
}
|
||||
global {
|
||||
interface Uni {
|
||||
$zp : $zp
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
declare type ZPagingSwiperRef = typeof import('./comps/z-paging-swiper')['ZPagingSwiperRef']
|
||||
declare type ZPagingSwiperItemRef = typeof import('./comps/z-paging-swiper-item')['ZPagingSwiperItemRef']
|
||||
Loading…
Reference in New Issue