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 all commits
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
46 changes: 26 additions & 20 deletions src/packages/infiniteloading/infiniteloading.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 = () => {
Expand All @@ -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)`,
}
}
Expand Down Expand Up @@ -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}
Expand All @@ -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>
)
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