diff --git a/z-paging-x/uni_modules/z-paging-x/changelog.md b/z-paging-x/uni_modules/z-paging-x/changelog.md index 582c896..ac72e5e 100644 --- a/z-paging-x/uni_modules/z-paging-x/changelog.md +++ b/z-paging-x/uni_modules/z-paging-x/changelog.md @@ -1,3 +1,7 @@ +## 0.3.1（2024-12-03） +1.`新增` events：`@refresherpulling`、`@refresherrefresh`、`@refresherrestore`、`@refresherabort`、`@scrolltolower`、`@scrolltoupper`、`@refresherStatusChange`、`@loadMoreStatusChange`。 +2.`新增` slot="empty"。 +3.`新增` `scrollToTop`、`scrollToBottom`、`scrollToY`添加是否展示滚动动画参数。 ## 0.3.0（2024-10-13） 1.`新增` 添加编译到web的支持。 2.`优化` 布局方式，使布局更灵活。 diff --git a/z-paging-x/uni_modules/z-paging-x/components/z-paging-x/enums/index.uts b/z-paging-x/uni_modules/z-paging-x/components/z-paging-x/enums/index.uts index d812ec6..29a3019 100644 --- a/z-paging-x/uni_modules/z-paging-x/components/z-paging-x/enums/index.uts +++ b/z-paging-x/uni_modules/z-paging-x/components/z-paging-x/enums/index.uts @@ -40,33 +40,33 @@ type EnumType = { } export default { - //当前加载类型 0.下拉刷新 1.上拉加载更多 + // 当前加载类型 0.下拉刷新 1.上拉加载更多 LoadingType: { Refresher: 0, LoadingMore: 1 }, - //下拉刷新状态 0.默认状态 1.松手立即刷新 2.刷新中 3.刷新结束 + // 下拉刷新状态 0.默认状态 1.松手立即刷新 2.刷新中 3.刷新结束 Refresher: { Default: 0, ReleaseToRefresh: 1, Loading: 2, Complete: 3 }, - //底部加载更多状态 0.默认状态 1.加载中 2.没有更多数据 3.加载失败 + // 底部加载更多状态 0.默认状态 1.加载中 2.没有更多数据 3.加载失败 More: { Default: 0, Loading: 1, NoMore: 2, Fail: 3 }, - //@query触发来源 0.用户主动下拉刷新 1.通过reload触发 2.通过refresh触发 3.通过滚动到底部加载更多或点击底部加载更多触发 + // @query触发来源 0.用户主动下拉刷新 1.通过reload触发 2.通过refresh触发 3.通过滚动到底部加载更多或点击底部加载更多触发 QueryFrom: { UserPullDown: 0, Reload: 1, Refresh: 2, LoadingMore: 3 }, - //列表缓存模式 + // 列表缓存模式 CacheMode: { //默认模式，只会缓存一次 Default: 'default', diff --git a/z-paging-x/uni_modules/z-paging-x/components/z-paging-x/z-paging-x.uvue b/z-paging-x/uni_modules/z-paging-x/components/z-paging-x/z-paging-x.uvue index 3817294..098a51b 100644 --- a/z-paging-x/uni_modules/z-paging-x/components/z-paging-x/z-paging-x.uvue +++ b/z-paging-x/uni_modules/z-paging-x/components/z-paging-x/z-paging-x.uvue @@ -5,7 +5,7 @@ /___| | .__/ \__,_|\__, |_|_| |_|\__, | |_| |___/ |___/ X -v0.3.0 (2024-07-08) +v0.3.1 (2024-12-03) by ZXLee --> @@ -21,7 +21,7 @@ by ZXLee @@ -36,14 +36,15 @@ by ZXLee - - + + + @@ -341,7 +342,13 @@ by ZXLee watch: { totalData(newVal: any[]) { this.$emit('update:modelValue', newVal); - } + }, + refresherStatus(newVal: number) { + this.$emit('refresherStatusChange', newVal); + }, + loadMoreStatus(newVal: number) { + this.$emit('loadMoreStatusChange', newVal); + }, }, mounted() { this.$zpxList = this.$refs['zpxList'] as UniElement; @@ -476,16 +483,30 @@ by ZXLee }, // 下拉刷新控件被下拉事件 _onRefresherpulling(e: RefresherEvent) { + this.$emit('refresherpulling', e); this.refresherStatus = e.detail.dy < this.finalRefresherThreshold ? Enum.Refresher.Default : Enum.Refresher.ReleaseToRefresh; }, // 下拉刷新被触发事件 - _onRefresherrefresh(_: RefresherEvent) { - this.$emit('refresh'); + _onRefresherrefresh(e: RefresherEvent) { + this.$emit('refresherrefresh', e); this._handleRefresh(); }, + // 下拉刷新被复位事件 + _onRefresherrestore(e: RefresherEvent) { + this.$emit('refresherrestore', e); + }, + // 下拉刷新被中止事件 + _onRefresherabort(e: RefresherEvent) { + this.$emit('refresherabort', e); + }, // 滚动到底部事件 - _onScrolltolower() { + _onScrolltolower(e: ScrollToLowerEvent) { this._handleLoadMore(); + this.$emit('scrolltolower', e); + }, + // 滚动到顶部事件 + _onScrolltoupper(e: ScrollToUpperEvent) { + this.$emit('scrolltoupper', e); }, // 列表正在滚动事件 _onScroll(e: ScrollEvent) { diff --git a/z-paging-x/uni_modules/z-paging-x/package.json b/z-paging-x/uni_modules/z-paging-x/package.json index a3b9208..d4987c7 100644 --- a/z-paging-x/uni_modules/z-paging-x/package.json +++ b/z-paging-x/uni_modules/z-paging-x/package.json @@ -2,7 +2,7 @@ "id": "z-paging-x", "name": "z-paging-x", "displayName": "【z-paging-x下拉刷新、上拉加载】z-paging uniappx版已上线！", - "version": "0.3.0", + "version": "0.3.1", "description": "分页全自动处理，支持自定义下拉刷新、上拉加载更多、自动管理空数据图、点击返回顶部、下拉显示最后更新时间等，持续完善中", "keywords": [ "uniapp-x", @@ -50,6 +50,9 @@ "vue3": "y" }, "App": { + "app-android": "u", + "app-harmony": "u", + "app-ios": "u" }, "H5-mobile": { "Safari": "u", diff --git a/z-paging-x/uni_modules/z-paging-x/readme.md b/z-paging-x/uni_modules/z-paging-x/readme.md index 9d21349..16f85eb 100644 --- a/z-paging-x/uni_modules/z-paging-x/readme.md +++ b/z-paging-x/uni_modules/z-paging-x/readme.md @@ -4,6 +4,7 @@ logo

+

请注意，此插件仅支持uniappx！！！若您为uniapp项目请使用z-paging！

> z-paging uniapp x版 @@ -89,8 +90,11 @@ npm update z-paging-x ``` ### props + #### 支持全局配置（非必须） + 在`main.uts`中 + ```uts import { setZPXConfig } from '@/uni_modules/z-paging-x/components/z-paging-x/config/index.uts' @@ -127,8 +131,9 @@ setZPXConfig({ | nested-scroll-child | (仅listIs = scroll-view有效)嵌套滚动子元素的id属性，不支持ref，scroll-view惯性滚动时会让对应id元素视图进行滚动，子元素滚动时会触发scroll-view的`nestedprescroll`事件，嵌套子元素需要设置`custom-nested-scroll` = true | String | '' | - | #### reload相关配置 -| 参数 | 说明 | 类型 | 默认值 | 可选值 | -| :----------------------------- | :----------------------------------------------------------- | :------ | :----- | :----- | + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +| :------------------------ | :----------------------------------------------------------- | :------ | :----- | :----- | | scroll-to-top-when-reload | reload时自动滚动到顶部(如果reload时list被清空导致占位消失也可能会自动返回到顶部，因此如果是这种情况还需要将`clean-list-when-reload`设置为false) | Boolean | true | false | | clean-list-when-reload | reload时立即自动清空原list，若立即自动清空，则在reload之后、请求回调之前页面是空白的 | Boolean | true | false | @@ -176,12 +181,19 @@ setZPXConfig({ ### events -| 事件名 | 说明 | 回调参数 | -| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| @query | 下拉刷新或滚动到底部时会自动触发此方法。`z-paging-x`加载时也会触发(若要禁止，请设置`:auto="false"`)。pageNo和pageSize会自动计算好，直接传给服务器即可。 | `参数1`:pageNo(当前第几页)；
`参数2`:pageSize(每页多少条)(pageSize必须与传给服务器的一致，如果需要修改pageSize，请通过`:default-page-size="15"`修改) | -| @refresh | 下拉刷新被触发 | - | -| @scroll | 列表滚动时触发 | `参数1`:(event: [ScrollEvent](https://doc.dcloud.net.cn/uni-app-x/component/list-view.html#scrollevent)) => void | -| @backToTopClick | 点击了返回到顶部 | 点击返回顶部按钮后是否滚动到顶部，默认为是。
如果需要禁止滚动到顶部事件，则在page的methods中书写：

backToTopClick(e: (toTop: boolean) => void) {
    e(false);
    //处理自己的业务逻辑
}

| +| 事件名 | 说明 | 回调参数 | +| ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| @query | 下拉刷新或滚动到底部时会自动触发此方法。`z-paging-x`加载时也会触发(若要禁止，请设置`:auto="false"`)。pageNo和pageSize会自动计算好，直接传给服务器即可。 | `参数1`:pageNo(当前第几页)；
`参数2`:pageSize(每页多少条)(pageSize必须与传给服务器的一致，如果需要修改pageSize，请通过`:default-page-size="15"`修改) | +| @refresherpulling | 下拉刷新控件被下拉事件 | `参数1`:(event: [RefresherEvent](https://doc.dcloud.net.cn/uni-app-x/component/list-view.html#unirefresherevent) => void | +| @refresherrefresh | 下拉刷新被触发事件 | `参数1`:(event: [RefresherEvent](https://doc.dcloud.net.cn/uni-app-x/component/list-view.html#unirefresherevent) => void | +| @refresherrestore | 下拉刷新被复位事件 | `参数1`:(event: [RefresherEvent](https://doc.dcloud.net.cn/uni-app-x/component/list-view.html#unirefresherevent) => void | +| @refresherabort | 下拉刷新被中止事件 | `参数1`:(event: [RefresherEvent](https://doc.dcloud.net.cn/uni-app-x/component/list-view.html#unirefresherevent) => void | +| @scroll | 列表滚动时触发 | `参数1`:(event: [ScrollEvent](https://doc.dcloud.net.cn/uni-app-x/component/list-view.html#uniscrollevent)) => void | +| @scrolltolower | 滚动到底部/右边，会触发 scrolltolower 事件 | `参数1`:(event: [ScrollToLowerEvent](https://doc.dcloud.net.cn/uni-app-x/component/list-view.html#uniscrolltolowerevent)) => void | +| @scrolltoupper | 滚动到顶部/左边，会触发 scrolltoupper 事件 | `参数1`:(event: [ScrollToUpperEvent](https://doc.dcloud.net.cn/uni-app-x/component/list-view.html#uniscrolltoupperevent)) => void | +| @backToTopClick | 点击了返回到顶部 | 点击返回顶部按钮后是否滚动到顶部，默认为是。
如果需要禁止滚动到顶部事件，则在page的methods中书写：

backToTopClick(e: (toTop: boolean) => void) {
    e(false);
    //处理自己的业务逻辑
}

| +| @refresherStatusChange | 下拉刷新状态改变 | `参数1`:下拉刷新状态：0.默认状态 1.松手立即刷新 2.刷新中 3.刷新结束 | +| @loadMoreStatusChange | 底部加载更多状态改变 | `参数1`:底部加载更多状态：0.默认状态 1.加载中 2.没有更多数据 3.加载失败 | ### methods @@ -192,9 +204,9 @@ setZPXConfig({ | completeByTotal | 【通过total判断是否有更多数据】请求成功调用此方法(将此方法替换`complete`方法即可，此方法为`complete`方法的功能扩展，遵循`complete`原有规则) | `参数1(必填)`:请求结果数组；`参数2(必填)`:列表总长度； | | completeByNoMore | 【自行判断是否有更多数据】请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging-x处理(将此方法替换`complete`方法即可，此方法为`complete`方法的功能扩展，遵循`complete`原有规则) | `参数1(必填)`:请求结果数组；`参数2(必填)`:是否没有更多数据，若为true则代表没有更多数据了； | | completeByError | 请求结束(失败)调用此方法，将自动展示失败页面 | - | -| scrollToTop | 滚动到顶部 | - | -| scrollToBottom | 滚动到底部 | - | -| scrollToY | 滚动到指定位置 | `参数1(必填)`:滚动到的位置 | +| scrollToTop | 滚动到顶部 | `参数1(必填)`:是否有动画效果 | +| scrollToBottom | 滚动到底部 | `参数1(必填)`:是否有动画效果 | +| scrollToY | 滚动到指定位置 | `参数1(必填)`:滚动到的位置；`参数2(必填)`:是否有动画效果 | ### slots