Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Infiniteloading): 多端适配 #2670

Merged
merged 2 commits into from
Oct 30, 2024
Merged

feat(Infiniteloading): 多端适配 #2670

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2cde759
feat(infinite): 多端适配
Alex-huxiyang Oct 29, 2024
7ea6306
chore: save
Alex-huxiyang Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -771,7 +771,7 @@
"author": "songsong"
},
{
"version": "2.0.0",
"version": "3.0.0",
"name": "InfiniteLoading",
"type": "component",
"tarodoc": true,
Expand Down
18 changes: 10 additions & 8 deletions src/packages/infiniteloading/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
}
Expand Down Expand Up @@ -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"
/>
Expand All @@ -61,7 +63,7 @@ const Demo1 = () => {
return (
<>
<Cell>
<ul style={InfiniteUlStyle} id="scroll">
<View style={InfiniteUlStyle} id="scroll">
<InfiniteLoading
target="scroll"
hasMore={hasMore}
Expand All @@ -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>
</>
)
Expand Down
24 changes: 15 additions & 9 deletions src/packages/infiniteloading/demos/taro/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
}
Expand Down Expand Up @@ -62,13 +64,13 @@ const Demo2 = () => {
return (
<>
<Cell>
<ul id="refreshScroll" style={InfiniteUlStyle}>
<View id="refreshScroll" style={InfiniteUlStyle}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

建议增强无障碍访问支持

将 HTML 列表元素（ul/li）替换为 View 组件虽然提升了跨平台兼容性，但可能会影响页面的无障碍访问支持。

建议添加适当的 ARIA 属性来保持无障碍支持：

 <View id="refreshScroll" style={InfiniteUlStyle}>
   <InfiniteLoading>
     {refreshList.map((item, index) => {
       return (
         <View
           className="infiniteLi"
           key={index}
           style={InfiniteLiStyle}
+          role="listitem"
+          aria-label={`列表项 ${item}`}
         >
           {item}
         </View>
       )
     })}
   </InfiniteLoading>
 </View>

Also applies to: 99-105

<InfiniteLoading
pullingText={
<>
<img
alt=""
style={{ height: '26px', width: '36px' }}
style={{ height: pxTransform(36), width: pxTransform(36) }}
Alex-huxiyang marked this conversation as resolved.
Show resolved Hide resolved
src="https://img13.360buyimg.com/imagetools/jfs/t1/219180/19/37902/438/65fa8cbbF5278d022/5eabe69b64bba791.png"
className="nut-infinite-top-tips-icons"
/>
Expand All @@ -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"
/>
Expand All @@ -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}
Expand Down
16 changes: 9 additions & 7 deletions src/packages/infiniteloading/demos/taro/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
}
Expand Down Expand Up @@ -50,7 +52,7 @@ const Demo3 = () => {
return (
<>
<Cell>
<ul id="customScroll" style={InfiniteUlStyle}>
<View id="customScroll" style={InfiniteUlStyle}>
<InfiniteLoading
target="customScroll"
loadingText="loading"
Expand All @@ -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>
</>
)
Expand Down
18 changes: 10 additions & 8 deletions src/packages/infiniteloading/demos/taro/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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),
Alex-huxiyang marked this conversation as resolved.
Show resolved Hide resolved
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',
Expand Down Expand Up @@ -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"
/>
Expand All @@ -62,7 +64,7 @@ const Demo4 = () => {
return (
<>
<Cell>
<ul id="primaryScroll" style={InfiniteUlStyle}>
<View id="primaryScroll" style={InfiniteUlStyle}>
<InfiniteLoading
target="primaryScroll"
type="primary"
Expand All @@ -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>
</>
)
Expand Down
2 changes: 1 addition & 1 deletion src/packages/infiniteloading/infiniteloading.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export const InfiniteLoading: FunctionComponent<

const getStyle = () => {
return {
height: topDisScoll < 0 ? `0px` : `${topDisScoll}px`,
height: topDisScoll < 0 ? px : `${topDisScoll}px`,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

修复未定义变量的使用问题

代码中使用了未定义的变量 px，这可能会导致运行时错误。在之前的版本中，这里使用的是字符串字面量 '0px'。

建议修改为：

-      height: topDisScoll < 0 ? px : `${topDisScoll}px`,
+      height: topDisScoll < 0 ? '0px' : `${topDisScoll}px`,
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
height: topDisScoll < 0 ? px : `${topDisScoll}px`,
height: topDisScoll < 0 ? '0px' : `${topDisScoll}px`,

transition: `height 0.2s cubic-bezier(0.25,0.1,0.25,1)`,
}
}
Expand Down
22 changes: 10 additions & 12 deletions src/packages/infiniteloading/infiniteloading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
)
Expand Down