目录
const [hasMore,setHasMore] = useState(true)
const [len,setlen] =useState(2)
const loadMore=()=> {
if (
window.innerHeight+window.screenY>=window.screenTop-1){
setTimeout(() => {
setlen(len + 4)
setHasMore(len < list.length)
}, 2000);
}
}通过比较窗口的可视区域高度和文档的滚动距离，判断是否滚动到了页面底部。这里使用了window.innerHeight来获取可视区域的高度，window.scrollY来获取文档的滚动距离，以及window.scrollY+window.innerHeight来获取文档可视区域的底部位置。
如果滚动到了页面底部，就执行一个延迟函数，使用setTimeout设定一个延迟时间（这里延迟2秒，通过2000来表示）。
在延迟函数中，执行更新状态的操作。通过调用setlen(len + 4)来增加一个变量len的值，这里将其增加了4，表示加载了4条数据。然后，使用setHasMore(len < list.length)来更新一个变量hasMore的值，这个变量表示是否还有更多数据可加载
引用antd-mobile中无限滚动
import { InfiniteScroll，List} from 'antd-mobile'
//组件包裹数据
<List>
<div>
{
list.slice(0,len).map((item,index)=>(
<span>{item}</span>
))
}
</div>
</List>
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} >
</InfiniteScroll> scroll?事件检测是否滚动到了底部。你可以使用?element.addEventListener('scroll', callback)?方法来注册一个监听器，其中?element?表示滚动容器元素，callback?表示在滚动事件触发时执行的函数。在该函数中，可以获取滚动容器的滚动位置和当前容器的高度、滚动条高度等信息，以判断是否已经触底（即滚动条滚动到底部）。
const [toup, settoup] = useState(false);//用来判断是否出现回到顶部按钮
useEffect(()=>{
getdata()
const handleScroll = () => {
// 回到顶部
const scrollTop = window.scrollY;
const shouldScroll = scrollTop > 0;
setShouldScrollToTop(shouldScroll);
settoup(shouldScroll)
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
},[])
window.scrollY是一个只读属性，用于返回窗口在垂直方向上已滚动的像素值。它提供了当前窗口垂直滚动位置的信息。
可以通过以下示例代码来获取并使用 window.scrollY 的值：
const handleScroll = () => {
?const scrollY = window.scrollY;
?console.log(scrollY); // 输出窗口垂直滚动的像素值
?// 进一步处理滚动事件
};
?
window.addEventListener('scroll', handleScroll);在上面的示例中，handleScroll 函数中的 scrollY 变量将存储 window.scrollY 的当前值。你可以将其用于进一步处理滚动事件，例如更新 UI 或执行特定的操作。
请注意，window.scrollY 是只读的，因此不能将其用于更改窗口的滚动位置。如果你想要滚动窗口，请使用 window.scrollTo() 或其他相关方法。
const backup =()=>{
window.scrollTo({top:0,behavior:'smooth'})
}根据toup的布尔值来决定按钮是否出现?
<div>
{
toup && (
<div style={{background:'orange',width:'30px',
lineHeight:'30px',height:'30px',
position:'fixed',bottom:'10px',zIndex:'999'}}>
<ArrowUp onClick={backup}></ArrowUp>
</div>
)
}
</div>?
同样也需要监听滚动容器的?scroll?事件，这里直接放入上边的函数
创建isSticky确定吸顶元素的样式
const [isSticky, setIsSticky] = useState(false);
useEffect(()=>{
getdata()
const handleScroll = () => {
// 回到顶部
const scrollTop = window.scrollY;
const shouldScroll = scrollTop > 0;
setShouldScrollToTop(shouldScroll);
settoup(shouldScroll)
// 吸顶
window.scrollY > 0 ? setIsSticky(true) : setIsSticky(false);
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
},[])<div className={`sticky-header ${isSticky ? 'sticky' : ''}`}>
<SearchBar placeholder='请输入内容'
onFocus={() => {
navigate('/search')
}}
/>
</div>.sticky-header {
/* Your header styles */
transition: all 0.3s ease-in-out;
}
.sticky {
position: sticky;
top: 0;
z-index: 999;
}?
import React, { useState } from 'react'
import { PullToRefresh, List } from 'antd-mobile'
export default function Search() {
function getNextData() {
const ret = []
for (let i = 0; i < 5; i++) {
const randomNumber = Math.floor(Math.random() * 900) + 100;
ret.push(randomNumber);
}
return ret
}
const [data, setData] = useState(() => getNextData())
const [data, setData] = useState(() => getNextData())：这行代码是使用 React 中的?useState?钩子来声明一个状态变量?data?和一个更新状态的函数?setData。useState(() => getNextData())?表示初始状态是通过调用?getNextData()?函数得到的。
useState(() => getNextData())?是一个自执行的函数，它会在组件第一次渲染时执行一次，并返回初始的状态值。初始状态值是通过?getNextData()?函数来获取的。
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
} <PullToRefresh
onRefresh={async () => {
await sleep(1000)
setData([...getNextData()])
}}
>
<List style={{ minHeight: '100vh' }}>
{data.map((item, index) => (
<List.Item key={index}>{item}</List.Item>
))}
</List>
</PullToRefresh>