用JS操作窗口(react中),触底加载,回到顶部,吸顶,下拉刷新,示例代码

2024-01-09 12:43:02

目录

触底加载

创建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?和一个更新状态的函数?setDatauseState(() => 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>

文章来源:https://blog.csdn.net/kkkys_kkk/article/details/135475168
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。