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

本文主要是介绍用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 和一个更新状态的函数 setDatauseState(() => 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中),触底加载,回到顶部,吸顶,下拉刷新,示例代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/587567

相关文章

Android ClassLoader加载机制详解

《AndroidClassLoader加载机制详解》Android的ClassLoader负责加载.dex文件,基于双亲委派模型,支持热修复和插件化,需注意类冲突、内存泄漏和兼容性问题,本文给大家介... 目录一、ClassLoader概述1.1 类加载的基本概念1.2 android与Java Class

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的