From 2cde759d73ef663cd5f891c21238d4c7fc1930f2 Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Tue, 29 Oct 2024 11:31:09 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(infinite):=20=E5=A4=9A=E7=AB=AF?= =?UTF-8?q?=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config.json | 2 +- .../infiniteloading/demos/taro/demo1.tsx | 18 +++++++------- .../infiniteloading/demos/taro/demo2.tsx | 24 ++++++++++++------- .../infiniteloading/demos/taro/demo3.tsx | 16 +++++++------ .../infiniteloading/demos/taro/demo4.tsx | 18 +++++++------- .../infiniteloading/infiniteloading.taro.tsx | 2 +- .../infiniteloading/infiniteloading.tsx | 22 ++++++++--------- 7 files changed, 56 insertions(+), 46 deletions(-) diff --git a/src/config.json b/src/config.json index e01e01cdf0..98b7a88ecf 100644 --- a/src/config.json +++ b/src/config.json @@ -771,7 +771,7 @@ "author": "songsong" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "InfiniteLoading", "type": "component", "tarodoc": true, diff --git a/src/packages/infiniteloading/demos/taro/demo1.tsx b/src/packages/infiniteloading/demos/taro/demo1.tsx index 3eb9790450..618f93cf26 100644 --- a/src/packages/infiniteloading/demos/taro/demo1.tsx +++ b/src/packages/infiniteloading/demos/taro/demo1.tsx @@ -1,12 +1,14 @@ import React, { useState, useEffect, CSSProperties } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import pxTransform from '@/utils/px-transform' const sleep = (time: number): Promise => new Promise((resolve) => { setTimeout(resolve, time) }) const InfiniteUlStyle: CSSProperties = { - height: '300px', + height: pxTransform(200), width: '100%', padding: '0', overflowY: 'auto', @@ -14,8 +16,8 @@ const InfiniteUlStyle: CSSProperties = { } const InfiniteLiStyle: CSSProperties = { - marginTop: '10px', - fontSize: '14px', + marginTop: pxTransform(10), + fontSize: pxTransform(14), color: 'rgba(100, 100, 100, 1)', textAlign: 'center', } @@ -51,7 +53,7 @@ const Demo1 = () => { return ( @@ -61,7 +63,7 @@ const Demo1 = () => { return ( <> - + ) diff --git a/src/packages/infiniteloading/demos/taro/demo2.tsx b/src/packages/infiniteloading/demos/taro/demo2.tsx index 666a5c5cd1..4b865632aa 100644 --- a/src/packages/infiniteloading/demos/taro/demo2.tsx +++ b/src/packages/infiniteloading/demos/taro/demo2.tsx @@ -1,12 +1,14 @@ import React, { useState, useEffect, CSSProperties } from 'react' import { Cell, InfiniteLoading, Toast } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import pxTransform from '@/utils/px-transform' const sleep = (time: number): Promise => new Promise((resolve) => { setTimeout(resolve, time) }) const InfiniteUlStyle: CSSProperties = { - height: '300px', + height: pxTransform(200), width: '100%', padding: '0', overflowY: 'auto', @@ -14,8 +16,8 @@ const InfiniteUlStyle: CSSProperties = { } const InfiniteLiStyle: CSSProperties = { - marginTop: '10px', - fontSize: '14px', + marginTop: pxTransform(10), + fontSize: pxTransform(14), color: 'rgba(100, 100, 100, 1)', textAlign: 'center', } @@ -62,13 +64,13 @@ const Demo2 = () => { return ( <> -
    + @@ -79,7 +81,7 @@ const Demo2 = () => { <> @@ -94,13 +96,17 @@ const Demo2 = () => { > {refreshList.map((item, index) => { return ( -
  • + {item} -
    • +     ) })} -
+ => new Promise((resolve) => { setTimeout(resolve, time) }) const InfiniteUlStyle: CSSProperties = { - height: '300px', + height: pxTransform(200), width: '100%', padding: '0', overflowY: 'auto', @@ -14,8 +16,8 @@ const InfiniteUlStyle: CSSProperties = { } const InfiniteLiStyle: CSSProperties = { - marginTop: '10px', - fontSize: '14px', + marginTop: pxTransform(10), + fontSize: pxTransform(14), color: 'rgba(100, 100, 100, 1)', textAlign: 'center', } @@ -50,7 +52,7 @@ const Demo3 = () => { return ( <> -
    + { > {customList.map((item, index) => { return ( -
  • + {item} -
    • +     ) })} -
+ ) diff --git a/src/packages/infiniteloading/demos/taro/demo4.tsx b/src/packages/infiniteloading/demos/taro/demo4.tsx index 6b5684571e..ef0bb0bdb8 100644 --- a/src/packages/infiniteloading/demos/taro/demo4.tsx +++ b/src/packages/infiniteloading/demos/taro/demo4.tsx @@ -1,12 +1,14 @@ import React, { useState, useEffect, CSSProperties } from 'react' import { Cell, InfiniteLoading } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import pxTransform from '@/utils/px-transform' const sleep = (time: number): Promise => new Promise((resolve) => { setTimeout(resolve, time) }) const InfiniteUlStyle: CSSProperties = { - height: '300px', + height: pxTransform(200), width: '100%', padding: '0', overflowY: 'auto', @@ -14,8 +16,8 @@ const InfiniteUlStyle: CSSProperties = { } const InfiniteLiStyle: CSSProperties = { - margin: '10px 10px 0', - fontSize: '14px', + marginTop: pxTransform(10), + fontSize: pxTransform(14), color: 'rgba(100, 100, 100, 1)', textAlign: 'center', backgroundColor: '#FFF', @@ -52,7 +54,7 @@ const Demo4 = () => { return ( @@ -62,7 +64,7 @@ const Demo4 = () => { return ( <> -
    + { > {customList.map((item, index) => { return ( -
  • + {item} -
    • +     ) })} -
+ ) diff --git a/src/packages/infiniteloading/infiniteloading.taro.tsx b/src/packages/infiniteloading/infiniteloading.taro.tsx index 37b729ab1f..0de573a0f5 100644 --- a/src/packages/infiniteloading/infiniteloading.taro.tsx +++ b/src/packages/infiniteloading/infiniteloading.taro.tsx @@ -94,7 +94,7 @@ export const InfiniteLoading: FunctionComponent< const getStyle = () => { return { - height: topDisScoll < 0 ? `0px` : `${topDisScoll}px`, + height: topDisScoll < 0 ? px : `${topDisScoll}px`, transition: `height 0.2s cubic-bezier(0.25,0.1,0.25,1)`, } } diff --git a/src/packages/infiniteloading/infiniteloading.tsx b/src/packages/infiniteloading/infiniteloading.tsx index 80186213e4..f21ea8c802 100644 --- a/src/packages/infiniteloading/infiniteloading.tsx +++ b/src/packages/infiniteloading/infiniteloading.tsx @@ -213,7 +213,15 @@ export const InfiniteLoading: FunctionComponent< onScroll && onScroll(resScrollTop) return offsetDistance <= threshold && direction === 'down' } - + function getBottomTipsText() { + if (isInfiniting) { + return loadingText || locale.infiniteloading.loadText + } + if (!hasMore) { + return loadMoreText || locale.infiniteloading.loadMoreText + } + return null + } return (
{children}
- {isInfiniting ? ( -
- {loadingText || locale.infiniteloading.loadText} -
- ) : ( - !hasMore && ( -
- {loadMoreText || locale.infiniteloading.loadMoreText} -
- ) - )} +
{getBottomTipsText()}
) From 7ea6306fffc257f42e76b0cbbb72c80ab17aa0e0 Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Tue, 29 Oct 2024 13:40:49 +0800 Subject: [PATCH 2/2] chore: save --- .../infiniteloading/infiniteloading.taro.tsx | 46 +++++++++++-------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/src/packages/infiniteloading/infiniteloading.taro.tsx b/src/packages/infiniteloading/infiniteloading.taro.tsx index 0de573a0f5..19976be410 100644 --- a/src/packages/infiniteloading/infiniteloading.taro.tsx +++ b/src/packages/infiniteloading/infiniteloading.taro.tsx @@ -12,6 +12,7 @@ import { useConfig } from '@/packages/configprovider/configprovider.taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' import { InfiniteLoadingType } from './types' +import pxTransform from '@/utils/px-transform' export interface InfiniteLoadingProps extends BasicComponent, @@ -72,15 +73,16 @@ export const InfiniteLoading: FunctionComponent< const y = useRef(0) const refreshMaxH = useRef(0) const distance = useRef(0) - + const classPrefix = 'nut-infinite' const classes = classNames(classPrefix, className, `${classPrefix}-${type}`) useEffect(() => { refreshMaxH.current = threshold - setTimeout(() => { + const timer = setTimeout(() => { getScrollHeight() }, 200) - }, [hasMore, isInfiniting]) + return () => clearTimeout(timer) + }, [hasMore, isInfiniting, threshold]) /** 获取需要滚动的距离 */ const getScrollHeight = () => { @@ -94,7 +96,7 @@ export const InfiniteLoading: FunctionComponent< const getStyle = () => { return { - height: topDisScoll < 0 ? px : `${topDisScoll}px`, + height: topDisScoll < 0 ? pxTransform(0) : pxTransform(topDisScoll), transition: `height 0.2s cubic-bezier(0.25,0.1,0.25,1)`, } } @@ -164,7 +166,15 @@ export const InfiniteLoading: FunctionComponent< refreshDone() } } - + function getBottomTipsText() { + if (isInfiniting) { + return loadingText || locale.infiniteloading.loadText + } + if (!hasMore) { + return loadMoreText || locale.infiniteloading.loadMoreText + } + return null + } return ( - - + + {pullingText || locale.infiniteloading.pullRefreshText} - {children} - - {isInfiniting ? ( - - {loadingText || locale.infiniteloading.loadText} - - ) : ( - !hasMore && ( - - {loadMoreText || locale.infiniteloading.loadMoreText} - - ) - )} + {children} + + + {getBottomTipsText()} + )