用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));
}

应用元素

 <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>