本文主要是介绍用JS操作窗口（react中），触底加载，回到顶部，吸顶，下拉刷新，示例代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
触底加载
创建loadMore函数
应用数据
回到顶部
监听滚动容器的 scroll 事件
window.scrollY
创建回到顶部按钮
吸顶
创建函数
应用元素
css样式
下拉刷新
创建新增数据函数
加载时间函数
应用元素
触底加载
创建loadMore函数
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>css样式
.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));
}应用元素
<PullToRefreshonRefresh={async () => {await sleep(1000)setData([...getNextData()])}}><List style={{ minHeight: '100vh' }}>{data.map((item, index) => (<List.Item key={index}>{item}</List.Item>))}</List></PullToRefresh>这篇关于用JS操作窗口（react中），触底加载，回到顶部，吸顶，下拉刷新，示例代码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
