Skip to content

Commit 2cde759

Browse files
Miles-hxyMiles-hxy
committed
feat(infinite): 多端适配
1 parent 0bf15d2 commit 2cde759

File tree

7 files changed

+56
-46
lines changed

7 files changed

+56
-46
lines changed

‎src/config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -771,7 +771,7 @@
771771
"author": "songsong"
772772
},
773773
{
774-
"version": "2.0.0",
774+
"version": "3.0.0",
775775
"name": "InfiniteLoading",
776776
"type": "component",
777777
"tarodoc": true,

‎src/packages/infiniteloading/demos/taro/demo1.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import React, { useState, useEffect, CSSProperties } from 'react'
22
import { Cell, InfiniteLoading } from '@nutui/nutui-react-taro'
3+
import { View } from '@tarojs/components'
4+
import pxTransform from '@/utils/px-transform'
35

46
const sleep = (time: number): Promise<unknown> =>
57
new Promise((resolve) => {
68
setTimeout(resolve, time)
79
})
810
const InfiniteUlStyle: CSSProperties = {
9-
height: '300px',
11+
height: pxTransform(200),
1012
width: '100%',
1113
padding: '0',
1214
overflowY: 'auto',
1315
overflowX: 'hidden',
1416
}
1517

1618
const InfiniteLiStyle: CSSProperties = {
17-
marginTop: '10px',
18-
fontSize: '14px',
19+
marginTop: pxTransform(10),
20+
fontSize: pxTransform(14),
1921
color: 'rgba(100, 100, 100, 1)',
2022
textAlign: 'center',
2123
}
@@ -51,7 +53,7 @@ const Demo1 = () => {
5153
return (
5254
<img
5355
alt=""
54-
style={{ height: '24px', width: '24px' }}
56+
style={{ height: pxTransform(24), width: pxTransform(24) }}
5557
src="https://img10.360buyimg.com/imagetools/jfs/t1/157510/3/39873/353/65fa8bfeF2627cb86/bd9e734d9fda59f2.png"
5658
className="nut-infinite-bottom-tips-icons"
5759
/>
@@ -61,7 +63,7 @@ const Demo1 = () => {
6163
return (
6264
<>
6365
<Cell>
64-
<ul style={InfiniteUlStyle} id="scroll">
66+
<View style={InfiniteUlStyle} id="scroll">
6567
<InfiniteLoading
6668
target="scroll"
6769
hasMore={hasMore}
@@ -87,13 +89,13 @@ const Demo1 = () => {
8789
>
8890
{defaultList.map((item, index) => {
8991
return (
90-
<li style={InfiniteLiStyle} key={index}>
92+
<View style={InfiniteLiStyle} key={index}>
9193
{item}
92-
</li>
94+
</View>
9395
)
9496
})}
9597
</InfiniteLoading>
96-
</ul>
98+
</View>
9799
</Cell>
98100
</>
99101
)

‎src/packages/infiniteloading/demos/taro/demo2.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import React, { useState, useEffect, CSSProperties } from 'react'
22
import { Cell, InfiniteLoading, Toast } from '@nutui/nutui-react-taro'
3+
import { View } from '@tarojs/components'
4+
import pxTransform from '@/utils/px-transform'
35

46
const sleep = (time: number): Promise<unknown> =>
57
new Promise((resolve) => {
68
setTimeout(resolve, time)
79
})
810
const InfiniteUlStyle: CSSProperties = {
9-
height: '300px',
11+
height: pxTransform(200),
1012
width: '100%',
1113
padding: '0',
1214
overflowY: 'auto',
1315
overflowX: 'hidden',
1416
}
1517

1618
const InfiniteLiStyle: CSSProperties = {
17-
marginTop: '10px',
18-
fontSize: '14px',
19+
marginTop: pxTransform(10),
20+
fontSize: pxTransform(14),
1921
color: 'rgba(100, 100, 100, 1)',
2022
textAlign: 'center',
2123
}
@@ -62,13 +64,13 @@ const Demo2 = () => {
6264
return (
6365
<>
6466
<Cell>
65-
<ul id="refreshScroll" style={InfiniteUlStyle}>
67+
<View id="refreshScroll" style={InfiniteUlStyle}>
6668
<InfiniteLoading
6769
pullingText={
6870
<>
6971
<img
7072
alt=""
71-
style={{ height: '26px', width: '36px' }}
73+
style={{ height: pxTransform(36), width: pxTransform(36) }}
7274
src="https://img13.360buyimg.com/imagetools/jfs/t1/219180/19/37902/438/65fa8cbbF5278d022/5eabe69b64bba791.png"
7375
className="nut-infinite-top-tips-icons"
7476
/>
@@ -79,7 +81,7 @@ const Demo2 = () => {
7981
<>
8082
<img
8183
alt=""
82-
style={{ height: '24px', width: '24px' }}
84+
style={{ height: pxTransform(24), width: pxTransform(24) }}
8385
src="https://img11.360buyimg.com/imagetools/jfs/t1/180248/35/42577/173/65fab7e9Fa868ae37/41e33477f960b5b2.png"
8486
className="nut-infinite-bottom-tips-icons"
8587
/>
@@ -94,13 +96,17 @@ const Demo2 = () => {
9496
>
9597
{refreshList.map((item, index) => {
9698
return (
97-
<li className="infiniteLi" key={index} style={InfiniteLiStyle}>
99+
<View
100+
className="infiniteLi"
101+
key={index}
102+
style={InfiniteLiStyle}
103+
>
98104
{item}
99-
</li>
105+
</View>
100106
)
101107
})}
102108
</InfiniteLoading>
103-
</ul>
109+
</View>
104110
<Toast
105111
type="text"
106112
visible={show}

‎src/packages/infiniteloading/demos/taro/demo3.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import React, { useState, useEffect, CSSProperties } from 'react'
22
import { Cell, InfiniteLoading } from '@nutui/nutui-react-taro'
3+
import { View } from '@tarojs/components'
4+
import pxTransform from '@/utils/px-transform'
35

46
const sleep = (time: number): Promise<unknown> =>
57
new Promise((resolve) => {
68
setTimeout(resolve, time)
79
})
810
const InfiniteUlStyle: CSSProperties = {
9-
height: '300px',
11+
height: pxTransform(200),
1012
width: '100%',
1113
padding: '0',
1214
overflowY: 'auto',
1315
overflowX: 'hidden',
1416
}
1517

1618
const InfiniteLiStyle: CSSProperties = {
17-
marginTop: '10px',
18-
fontSize: '14px',
19+
marginTop: pxTransform(10),
20+
fontSize: pxTransform(14),
1921
color: 'rgba(100, 100, 100, 1)',
2022
textAlign: 'center',
2123
}
@@ -50,7 +52,7 @@ const Demo3 = () => {
5052
return (
5153
<>
5254
<Cell>
53-
<ul id="customScroll" style={InfiniteUlStyle}>
55+
<View id="customScroll" style={InfiniteUlStyle}>
5456
<InfiniteLoading
5557
target="customScroll"
5658
loadingText="loading"
@@ -60,13 +62,13 @@ const Demo3 = () => {
6062
>
6163
{customList.map((item, index) => {
6264
return (
63-
<li key={index} style={InfiniteLiStyle}>
65+
<View key={index} style={InfiniteLiStyle}>
6466
{item}
65-
</li>
67+
</View>
6668
)
6769
})}
6870
</InfiniteLoading>
69-
</ul>
71+
</View>
7072
</Cell>
7173
</>
7274
)

‎src/packages/infiniteloading/demos/taro/demo4.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import React, { useState, useEffect, CSSProperties } from 'react'
22
import { Cell, InfiniteLoading } from '@nutui/nutui-react-taro'
3+
import { View } from '@tarojs/components'
4+
import pxTransform from '@/utils/px-transform'
35

46
const sleep = (time: number): Promise<unknown> =>
57
new Promise((resolve) => {
68
setTimeout(resolve, time)
79
})
810
const InfiniteUlStyle: CSSProperties = {
9-
height: '300px',
11+
height: pxTransform(200),
1012
width: '100%',
1113
padding: '0',
1214
overflowY: 'auto',
1315
overflowX: 'hidden',
1416
}
1517

1618
const InfiniteLiStyle: CSSProperties = {
17-
margin: '10px 10px 0',
18-
fontSize: '14px',
19+
marginTop: pxTransform(10),
20+
fontSize: pxTransform(14),
1921
color: 'rgba(100, 100, 100, 1)',
2022
textAlign: 'center',
2123
backgroundColor: '#FFF',
@@ -52,7 +54,7 @@ const Demo4 = () => {
5254
return (
5355
<img
5456
alt=""
55-
style={{ height: '24px', width: '24px' }}
57+
style={{ height: pxTransform(24), width: pxTransform(24) }}
5658
src="https://img13.360buyimg.com/imagetools/jfs/t1/235005/5/15288/348/65fabd46F80f7367e/09fb5d99d07bee66.png"
5759
className="nut-infinite-bottom-tips-icons"
5860
/>
@@ -62,7 +64,7 @@ const Demo4 = () => {
6264
return (
6365
<>
6466
<Cell>
65-
<ul id="primaryScroll" style={InfiniteUlStyle}>
67+
<View id="primaryScroll" style={InfiniteUlStyle}>
6668
<InfiniteLoading
6769
target="primaryScroll"
6870
type="primary"
@@ -78,13 +80,13 @@ const Demo4 = () => {
7880
>
7981
{customList.map((item, index) => {
8082
return (
81-
<li key={index} style={InfiniteLiStyle}>
83+
<View key={index} style={InfiniteLiStyle}>
8284
{item}
83-
</li>
85+
</View>
8486
)
8587
})}
8688
</InfiniteLoading>
87-
</ul>
89+
</View>
8890
</Cell>
8991
</>
9092
)

‎src/packages/infiniteloading/infiniteloading.taro.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export const InfiniteLoading: FunctionComponent<
9494

9595
const getStyle = () => {
9696
return {
97-
height: topDisScoll < 0 ? `0px` : `${topDisScoll}px`,
97+
height: topDisScoll < 0 ? px : `${topDisScoll}px`,
9898
transition: `height 0.2s cubic-bezier(0.25,0.1,0.25,1)`,
9999
}
100100
}

‎src/packages/infiniteloading/infiniteloading.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,15 @@ export const InfiniteLoading: FunctionComponent<
213213
onScroll && onScroll(resScrollTop)
214214
return offsetDistance <= threshold && direction === 'down'
215215
}
216-
216+
function getBottomTipsText() {
217+
if (isInfiniting) {
218+
return loadingText || locale.infiniteloading.loadText
219+
}
220+
if (!hasMore) {
221+
return loadMoreText || locale.infiniteloading.loadMoreText
222+
}
223+
return null
224+
}
217225
return (
218226
<div
219227
className={classes}
@@ -229,17 +237,7 @@ export const InfiniteLoading: FunctionComponent<
229237
</div>
230238
<div className="nut-infinite-container">{children}</div>
231239
<div className="nut-infinite-bottom">
232-
{isInfiniting ? (
233-
<div className="nut-infinite-bottom-tips">
234-
{loadingText || locale.infiniteloading.loadText}
235-
</div>
236-
) : (
237-
!hasMore && (
238-
<div className="nut-infinite-bottom-tips">
239-
{loadMoreText || locale.infiniteloading.loadMoreText}
240-
</div>
241-
)
242-
)}
240+
<div className="nut-infinite-bottom-tips">{getBottomTipsText()}</div>
243241
</div>
244242
</div>
245243
)

0 commit comments

Comments
 (0)