select下拉框---无限滚动加载

这篇具有很好参考价值的文章主要介绍了select下拉框---无限滚动加载。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求: select的下拉框,后端做了分页,此时前段需要同步加分页
解决思路: 考虑到交互和性能,采用触底请求下一页(无限滚动加载)

代码示例:

import { Select, message } from 'antd';
import React, { useEffect, useState } from 'react';

const App: React.FC = () => {
  const [selectArr, setSelectArr] = useState([]); //下拉框数组
  const [loading, setLoading] = useState(false); //加载loading
  const [hasMore, setHasMore] = useState(true); //是否还有更多数据需要加载
  const PAGE_SIZE = 10; //每页数量
  const [page, setPage] = useState(1); //当前页,默认第一页开始

  //数据处理/下一页/是否继续请求
  const getSelectArr = () => {
    if (loading || !hasMore) {
      return;
    }
    setLoading(true);
    try {
      const {success,data,errorMsg}=await getSelectArrApi() //api请求
      const errorMsg = null;
      if (success) {
        setSelectArr((prevData) => [...prevData, ...data]); // 更新数据(eg:第二页和第一页合并数组,第三页和前两页合并...)
        setPage(page + 1); //更新为下一个(eg:第一页变成请求第二页,再第三页..,以此类推...)
        setHasMore(data.length === PAGE_SIZE); //对比,当返回的新数组长度小于pagesize,则说明,数据已经全部拿到; 反之说明,还有下一页
      } else {
        message.error(errorMsg);
      }
      setLoading(false);
    } catch (err) {
      console.error(err);
    }
  };

  //滚动时操作函数
  const handleScroll = (event) => {
    //scrollTop:获取或设置一个元素的内容垂直滚动的像素数。
    //scrollHeight:一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。
    //clientHeight:元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。
    const { scrollTop, scrollHeight, clientHeight } = event.target;
    if (scrollHeight - (scrollTop + clientHeight) < 100) {
      //滚动加载
      getSelectArr();
    }
  };

  useEffect(() => {
    getSelectArr();
  });

  return (
    <Select
      showSearch
      placeholder="选择查询的名称"
      optionFilterProp="children"
      onChange={(value: string) => console.log(`selected ${value}`)}
      onSearch={(value: string) => console.log('search:', value)}
      filterOption={(input, option) =>
        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
      }
      options={
        Array.isArray(selectArr) &&
        selectArr?.map((item) => {
          return {
            key: item.id,
            label: item.name,
            value: item.id,
          };
        })
      }
      virtual={true}
      onPopupScroll={(e) => handleScroll(e)}
    />
  );
};

export default App;

代码示例讲解

select下拉框---无限滚动加载,项目实用小方法,前端,react.js,无限滚动加载,typescript文章来源地址https://www.toymoban.com/news/detail-519504.html

到了这里,关于select下拉框---无限滚动加载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter笔记:滚动之-无限滚动与动态加载的实现

    Flutter笔记 无限滚动与动态加载的实现 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/133342307 本文还有另外一个版本,基于GetX简单状态管理状态。地址为:https://jclee95.blog.csdn.net/article/details/13336

    2024年02月07日
    浏览(41)
  • 博客无限滚动加载(html、css、js)实现

    这是一个简单实现了类似博客瀑布流加载功能的页面,使用html、css、js实现。简单易懂,值得学习借鉴。👍 演示地址:https://i_dog.gitee.io/easy-web-projects/infinite_scroll_blog/index.html index.html style.css script.js 该项目从github中的vanillawebprojects仓库收集。 原始代码: 原始代码地址 https

    2024年02月07日
    浏览(39)
  • vue3+elementUI-plus实现select下拉框的虚拟滚动

    网上查了几个方案,要不就是不兼容,要不就是不支持vue3, 最终找到一个合适的,并且已上线使用,需要修改一下样式: 代码如下: main.js里引用 vue文件: js代码: css代码:

    2024年02月13日
    浏览(41)
  • Element-Plus select选择器-下拉组件错位bug(有高度滚动时)

    由于项目不便展示,因此在官网复现bug https://element-plus.org/zh-CN/component/select.html#基础用法 源码调试时发现下拉菜单是直接放在body 元素里,这时候希望它不要直接放在body里, 查阅文档看到这两个属性: 但是添加了上面的属性后,出现了新的问题,要么是不生效,要么是下拉

    2024年02月12日
    浏览(32)
  • 前端多张图片无缝无限循环滚动

    想必大家都注意到marquee的不循环滚动。下面说一下循环滚动相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交

    2024年01月15日
    浏览(54)
  • elementUi select下拉框触底加载异步分页数据

    在Element UI中,可以通过监听select下拉框的 visible-change 事件来实现触底加载下一页的效果。 方式一:利用elementUi的事件 具体步骤如下: 首先,在select组件中设置: @visible-change=\\\"handleVisibleChange\\\" ref=\\\"mySelect\\\" 在data中定义一个变量pageNum,用于记录当前加载的页码: pageNum: 1, 在m

    2024年02月14日
    浏览(37)
  • a-tree-select 基本使用,下拉框高度和宽度设置、回显时滚动条定位解决。

    1)问题效果 2)理想效果 3)完整代码 说明:设置 dropdownStyle( 下拉菜单样式 ),添加如下代码,高度可自己调整。 :dropdown-style=\\\"{ maxHeight: \\\'400px\\\', overflow: \\\'auto\\\' }\\\" 1)问题效果 2)理想效果 说明:与文本框同宽,内容过长时出现横向滚动条。 3)完整代码 说明:设置 dropdownM

    2024年02月14日
    浏览(39)
  • Vue 3 + Element UI Plus 实现 Select 下拉框的虚拟滚动效果详解与代码示例

    在 Vue 3 项目中,当下拉框中的选项过多时,使用虚拟滚动可以提升性能和用户体验。本文将介绍如何使用 Vue 3 和 Element UI Plus(el-select-plus)组件实现 Select 下拉框的虚拟滚动效果,并提供详细的代码示例。 首先,确保你已经安装了 Element UI Plus,它是 Element UI 的扩展版本,支

    2024年02月08日
    浏览(50)
  • vue+element-ui 实现下拉框滚动加载

    该功能是由 自定义滚动指令 结合下拉框 :remote-method 远程搜索 实现的 开启远程搜索 参考官方文档 绑定自定义指令 v-el-select-loadmore=“loadmore”

    2024年02月14日
    浏览(60)
  • el-select下拉框处理分页数据,触底加载更多

    1、声明自定义指令: 2、使用自定义指令v-loadmore: 3、发送请求加载数据 参考:el-select滚动到底部加载更多(分页加载数据)_el-select 触底加载分页_天道酬勤_鹿的博客-CSDN博客

    2024年02月16日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包