feat(Infiniteloading): 多端适配 (#2670)

* feat(infinite): 多端适配 * chore: save
jdf2e · Oct 30, 2024 · 27b34ff · 27b34ff
1 parent 3c6973c
commit 27b34ff
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 65 deletions.
diff --git 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
@@ -1,21 +1,23 @@
 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<unknown> =>
   new Promise((resolve) => {
     setTimeout(resolve, time)
   })
 const InfiniteUlStyle: CSSProperties = {
-  height: '300px',
+  height: pxTransform(200),
   width: '100%',
   padding: '0',
   overflowY: 'auto',
   overflowX: 'hidden',
 }
 
 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 (
       <img
         alt=""
-        style={{ height: '24px', width: '24px' }}
+        style={{ height: pxTransform(24), width: pxTransform(24) }}
         src="https://img10.360buyimg.com/imagetools/jfs/t1/157510/3/39873/353/65fa8bfeF2627cb86/bd9e734d9fda59f2.png"
         className="nut-infinite-bottom-tips-icons"
       />
@@ -61,7 +63,7 @@ const Demo1 = () => {
   return (
     <>
       <Cell>
-        <ul style={InfiniteUlStyle} id="scroll">
+        <View style={InfiniteUlStyle} id="scroll">
           <InfiniteLoading
             target="scroll"
             hasMore={hasMore}
@@ -87,13 +89,13 @@ const Demo1 = () => {
           >
             {defaultList.map((item, index) => {
               return (
-                <li style={InfiniteLiStyle} key={index}>
+                <View style={InfiniteLiStyle} key={index}>
                   {item}
-                </li>
+                </View>
               )
             })}
           </InfiniteLoading>
-        </ul>
+        </View>
       </Cell>
     </>
   )

diff --git a/src/packages/infiniteloading/demos/taro/demo2.tsx b/src/packages/infiniteloading/demos/taro/demo2.tsx
@@ -1,21 +1,23 @@
 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<unknown> =>
   new Promise((resolve) => {
     setTimeout(resolve, time)
   })
 const InfiniteUlStyle: CSSProperties = {
-  height: '300px',
+  height: pxTransform(200),
   width: '100%',
   padding: '0',
   overflowY: 'auto',
   overflowX: 'hidden',
 }
 
 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 (
     <>
       <Cell>
-        <ul id="refreshScroll" style={InfiniteUlStyle}>
+        <View id="refreshScroll" style={InfiniteUlStyle}>
           <InfiniteLoading
             pullingText={
               <>
                 <img
                   alt=""
-                  style={{ height: '26px', width: '36px' }}
+                  style={{ height: pxTransform(36), width: pxTransform(36) }}
                   src="https://img13.360buyimg.com/imagetools/jfs/t1/219180/19/37902/438/65fa8cbbF5278d022/5eabe69b64bba791.png"
                   className="nut-infinite-top-tips-icons"
                 />
@@ -79,7 +81,7 @@ const Demo2 = () => {
               <>
                 <img
                   alt=""
-                  style={{ height: '24px', width: '24px' }}
+                  style={{ height: pxTransform(24), width: pxTransform(24) }}
                   src="https://img11.360buyimg.com/imagetools/jfs/t1/180248/35/42577/173/65fab7e9Fa868ae37/41e33477f960b5b2.png"
                   className="nut-infinite-bottom-tips-icons"
                 />
@@ -94,13 +96,17 @@ const Demo2 = () => {
           >
             {refreshList.map((item, index) => {
               return (
-                <li className="infiniteLi" key={index} style={InfiniteLiStyle}>
+                <View
+                  className="infiniteLi"
+                  key={index}
+                  style={InfiniteLiStyle}
+                >
                   {item}
-                </li>
+                </View>
               )
             })}
           </InfiniteLoading>
-        </ul>
+        </View>
         <Toast
           type="text"
           visible={show}

diff --git a/src/packages/infiniteloading/demos/taro/demo3.tsx b/src/packages/infiniteloading/demos/taro/demo3.tsx
@@ -1,21 +1,23 @@
 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<unknown> =>
   new Promise((resolve) => {
     setTimeout(resolve, time)
   })
 const InfiniteUlStyle: CSSProperties = {
-  height: '300px',
+  height: pxTransform(200),
   width: '100%',
   padding: '0',
   overflowY: 'auto',
   overflowX: 'hidden',
 }
 
 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 (
     <>
       <Cell>
-        <ul id="customScroll" style={InfiniteUlStyle}>
+        <View id="customScroll" style={InfiniteUlStyle}>
           <InfiniteLoading
             target="customScroll"
             loadingText="loading"
@@ -60,13 +62,13 @@ const Demo3 = () => {
           >
             {customList.map((item, index) => {
               return (
-                <li key={index} style={InfiniteLiStyle}>
+                <View key={index} style={InfiniteLiStyle}>
                   {item}
-                </li>
+                </View>
               )
             })}
           </InfiniteLoading>
-        </ul>
+        </View>
       </Cell>
     </>
   )

diff --git a/src/packages/infiniteloading/demos/taro/demo4.tsx b/src/packages/infiniteloading/demos/taro/demo4.tsx
@@ -1,21 +1,23 @@
 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<unknown> =>
   new Promise((resolve) => {
     setTimeout(resolve, time)
   })
 const InfiniteUlStyle: CSSProperties = {
-  height: '300px',
+  height: pxTransform(200),
   width: '100%',
   padding: '0',
   overflowY: 'auto',
   overflowX: 'hidden',
 }
 
 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 (
       <img
         alt=""
-        style={{ height: '24px', width: '24px' }}
+        style={{ height: pxTransform(24), width: pxTransform(24) }}
         src="https://img13.360buyimg.com/imagetools/jfs/t1/235005/5/15288/348/65fabd46F80f7367e/09fb5d99d07bee66.png"
         className="nut-infinite-bottom-tips-icons"
       />
@@ -62,7 +64,7 @@ const Demo4 = () => {
   return (
     <>
       <Cell>
-        <ul id="primaryScroll" style={InfiniteUlStyle}>
+        <View id="primaryScroll" style={InfiniteUlStyle}>
           <InfiniteLoading
             target="primaryScroll"
             type="primary"
@@ -78,13 +80,13 @@ const Demo4 = () => {
           >
             {customList.map((item, index) => {
               return (
-                <li key={index} style={InfiniteLiStyle}>
+                <View key={index} style={InfiniteLiStyle}>
                   {item}
-                </li>
+                </View>
               )
             })}
           </InfiniteLoading>
-        </ul>
+        </View>
       </Cell>
     </>
   )

diff --git 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 ? `0px` : `${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 (
     <ScrollView
       {...rest}
@@ -179,24 +189,20 @@ export const InfiniteLoading: FunctionComponent<
       onTouchMove={touchMove}
       onTouchEnd={touchEnd}
     >
-      <View className="nut-infinite-top" ref={refreshTop} style={getStyle()}>
-        <View className="nut-infinite-top-tips">
+      <View
+        className={`${classPrefix}-top`}
+        ref={refreshTop}
+        style={getStyle()}
+      >
+        <View className={`${classPrefix}-top-tips`}>
           {pullingText || locale.infiniteloading.pullRefreshText}
         </View>
       </View>
-      <View className="nut-infinite-container">{children}</View>
-      <View className="nut-infinite-bottom">
-        {isInfiniting ? (
-          <View className="nut-infinite-bottom-tips">
-            {loadingText || locale.infiniteloading.loadText}
-          </View>
-        ) : (
-          !hasMore && (
-            <View className="nut-infinite-bottom-tips">
-              {loadMoreText || locale.infiniteloading.loadMoreText}
-            </View>
-          )
-        )}
+      <View className={`${classPrefix}-container`}>{children}</View>
+      <View className={`${classPrefix}-bottom`}>
+        <View className={`${classPrefix}-bottom-tips`}>
+          {getBottomTipsText()}
+        </View>
       </View>
     </ScrollView>
   )

diff --git 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 (
     <div
       className={classes}
@@ -229,17 +237,7 @@ export const InfiniteLoading: FunctionComponent<
       </div>
       <div className="nut-infinite-container">{children}</div>
       <div className="nut-infinite-bottom">
-        {isInfiniting ? (
-          <div className="nut-infinite-bottom-tips">
-            {loadingText || locale.infiniteloading.loadText}
-          </div>
-        ) : (
-          !hasMore && (
-            <div className="nut-infinite-bottom-tips">
-              {loadMoreText || locale.infiniteloading.loadMoreText}
-            </div>
-          )
-        )}
+        <div className="nut-infinite-bottom-tips">{getBottomTipsText()}</div>
       </div>
     </div>
   )