react实现分页-封装组件

2023-10-30

需求:根据后台的数据,判断是否有下一页。如果有下一页,用户上划加载更多调用接口。
结合 antd-mobileListView 组件实现。
参数解释

  1. dataSource:数据源(数组)
  2. currentPage:页数
  3. initialListSize:初始化展示的条数
  4. pageSize:每一页的条数
  5. onEndReachedThreshold:距离底部的距离
  6. nextLink:根据后台返回的数据,是否有下一页
  7. isLoadingMore:用户是否在上拉
  8. isRefreshing:用户是否在下拉
  9. damping:距离顶部多少进入下拉
import React from "react";
import {
    immutableRenderDecorator } from "react-immutable-render-mixin";
import PropTypes from "prop-types";
import {
    ListView } from "antd-mobile"
import {
    PullToRefresh } from "antd-mobile"

import "./refreshList-component.less";

class RefreshList extends React.Component {
   
    static defaultProps = {
   
        name: "stranger"
    }
    constructor(props) {
   
        super(props)
        const dataSource = new ListView.DataSource({
   
            rowHasChanged: (row1, row2) => row1 !== row2
        })
        this.state = {
   
            dataSource: dataSource.cloneWithRows(this.props.resLst), 
            currentPage: this.props.currentPage || 0, 
            initialListSize: this.props.initialListSize || 20, 
            pageSize: this.props.pageSize || 20, 
            onEndReachedThreshold: this.props.onEndReachedThreshold || 60, 
            nextLink: this.props.nextLink, 
            isLoadingMore: this.props.isLoadingMore || false, 
            isRefreshing: this.props.isRefreshing || false, 
            damping: this.props.damping || 26 
        };

    }
    componentWillReceiveProps(nextProps, nextState) {
   
        if (nextProps.resLst) {
   
            const dataSource = new ListView.DataSource({
   
                rowHasChanged: (row1, row2) => row1 !== row2
            })
            this.hasScroll = false
            this.setState({
   
                dataSource: dataSource.cloneWithRows(nextProps.resLst)
            }, 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react实现分页-封装组件 的相关文章

  • pubnub 和 head.js

    有没有人成功整合过pubnub http www pubnub com 和 head js 正确吗 Pubnub http www pubnub com 希望我将他们的脚本放在页面底部并带有 div 就在它前面的标签 这可以确保在最后调用
  • 使用 javascript 更改 div 颜色

    div style height 20px width 100 background color 000000 div br
  • html 表格单元格的条件格式

    是否有现成的解决方案可以对 HTML 表格进行条件格式设置 通过条件格式 我更感兴趣的是根据该列或其他列 在同一个表中 的值 数字 将不同的颜色作为单元格背景 类似于我们在 Excel 条件格式 gt 色阶 gt 红黄绿中的内容 我想在通过
  • Jest - 模拟函数,从另一个文件导入

    测试的文件使用从另一个文件导入的函数 import myFunc from myFile 如何在该文件的测试中模拟该函数的返回值 我正在使用笑话 这对我有用 我不确定这是否是一个好的做法 import as myFile from myFi
  • 在鼠标光标位置添加 cytoscape 节点

    我想在画布上的单击事件上的鼠标箭头位置添加一个 cytoscape 节点 我怎样才能做到这一点 我的方法 效果不太好 我可以通过单击创建一个节点 但无法确保创建的节点的位置位于我单击的位置 使用这样的东西 cy click function
  • 如何导入和导出 javascript ES6 类

    我是 javascript 和 nodejs 的新手 我正在使用这个项目来发展我的技能并学习新技术 目前我的项目使用多个相互依赖的类 类文件位于不同的目录中 我当前正在尝试使用 export 和 require 语句来允许在其他文件中引用类
  • Web 组件 - 服务/非 html 组件

    所以我来自 Angular 想看看如何创建vanilla Web components 现在 从 Angular 开始 我们倾向于将事物分开 组件 充当 HTML CSS 和一些 javascript 然后是 服务 主要负责收集数据和执行不
  • Chrome 扩展同步调用 - 仅在窗口关闭后创建窗口

    我有这个代码 function voteNewWindow mailNum chrome windows create url http www google com incognito true function window conso
  • 启用/禁用由用户输入确定的复选框

    我有一个简单的表单 用户可以在其中输入他的联系号码 如果联系号码以 07 开头 则该复选框已启用 其他我需要禁用它的复选框 我已经编写了一些代码 但我面临的问题是 当用户键入 01 时 它会被禁用 但如果他们继续在 01 之后添加任何其他数
  • 如何动态突出显示网页上的字符串?

    我想创建带有 url 的页面 例如 http xyzcorp schedules 2015Aug24 Aug28 Jim Hawkins http xyzcorp schedules 2015Aug24 Aug28 Billy Bones
  • 通过JS Laravel访问存储目录

    有没有办法访问storage目录 该目录已经链接到publicJS 中的目录 我正在尝试制作一个上传图片的表单 验证脚本 if request gt hasFile photos marker gt photos request gt ph
  • 如何在react-三纤维中提取并播放动画

    嗯 我有 gltf 动画模型 我成功加载模型 但无法播放嵌入的动画 我想知道是否可以以任何方式解决它 顺便说一句 我正在反应中工作 先感谢您 在这里您可以找到型号https drive google com file d 1ZVyklaQu
  • 如何更改自动完成中的结果过滤器?

    我不想进行字面匹配 而是想通过正则表达式选择结果 我可以覆盖自动完成的默认行为来完成此任务还是需要替代结构 有一个内置的方法可以做到这一点 只需提供一个函数source http jqueryui com demos autocomplet
  • JavaScript 测验在提出所有问题之前结束

    我现在正在学习 JavaScript 并且正在创建一个测验 我的测验运行正常 控制台中没有任何错误 但它会跳过问题 有时会在回答所有问题之前结束测验 即使给出正确答案 也会减少时间 我不太确定为什么它会这样做 因为在我看来它的编码是正确的
  • 如何检测元素内容何时发生变化

    我正在寻找一种方法来监视元素内动态填充 无页面重新加载 内容 以便我可以将类添加到另一个元素 到目前为止我有这个 HTML div class message container div class messages error span
  • 获取点击的的DOM路径

    HTML div class lol a class rightArrow href a div 伪代码 rightArrow click function rightArrowParents this dom dom is the pse
  • React 应用程序中未调用 Microsoft Graph Toolkit 组件的事件处理程序

    我正在尝试在我的 React 应用程序中使用 Microsoft Graph Toolkit 中的登录组件 它工作得很好 但我似乎无法让任何事件发生 例如 import React from react import MgtLogin Pr
  • RoR - Rails 中的大文件上传

    我有一个 Rails Web 应用程序 允许用户上传视频 视频存储在 NFS 安装的目录中 当前的设置适用于较小的文件 但我也需要支持大文件上传 最多 4GB 当我尝试上传 4GB 文件时 它最终会发生 但从用户体验的角度来看很糟糕 上传开
  • 将 RequireJS 与遗留代码结合使用

    我正在处理一个非常大的项目 该项目使用 包含带有脚本标记的 javascript 文件的旧版 JSP 页面 使用其他 javascript 模块而不使用 RequireJS 的骨干模型和视图 现在 我们希望开始将 RequireJS 与 j
  • 强制输入数字小数位

    我想强制

随机推荐

  • Opencv-C++笔记 (10) : opencv-图像像素计算

    文章目录 一 概率 二 寻找图像像素的最大值和最小值 三 计算图像的均值和标准方差 4 两张图片的比较运算 5 两张图片的逻辑运算 一 概率 我们可以将数字图像理解成一定尺寸的矩阵 矩阵中每个元素的大小表示了图像中每个像素的亮暗程度 因此统
  • 笔记本电脑的键盘突然用不了怎么办(┬_┬)?!

    作为一个铁打的程序员 如果突然键盘用不了 那无异于打断了我们的双手 脑海中一大堆的代码想要溢出却无法打出来 简直无法想象 今天晚上由于手贱下载了个VMware的清理软件 不小心把键盘驱动的注册表信息也删除了 然后就各种GG 瞎紧张了半个多小
  • C++基本数据类型

    C 基本数据类型 第一章 C 基本数据类型 文章目录 C 基本数据类型 前言 一 整形 二 实型 浮点型 三 字符和字符串 四 布尔类型 五 附录 转义字符表 六 附录 算数运算符 七 附录 赋值运算符 八 附录 比较运算符 九 附录 逻辑
  • ASO和ASM的关系与区别

    很多刚入行的从业者 都被ASO ASM这两个行业专属词搞混了 特别是ASM 接下来就由冠智ASO带你了解一下这两者的区别 一 ASO ASM的定义 ASO App Store Optimization 即应用商城优化 由美国传入中国的App
  • 宏碁使用UltraISO制作启动盘,装win10系统

    目录 前言 事先准备 第一步 制作启动盘 第二步 U盘装系统 第三步 安装必要的驱动 前言 今天想用软碟通来制作一个启动盘 安装win10系统 特此记录一下 事先准备 宏碁暗影骑士pro 32G U盘 Windows 10 LTSC 201
  • 由于系统限制了文件目录的读/写权限,程序将会退出,你可以重新安装百度网盘到有权限的目录或以管理员身份运行百度网盘。

    由于系统限制了文件目录的读 写权限 程序将会退出 你可以重新安装百度网盘到有权限的目录或以管理员身份运行百度网盘
  • Firefox,火狐about:config设置详解

    1 accessibility accesskeycausesactivation accesskey 允许用户通过Alt accesskey的方法来打开页面中的超链接 其中的accesskey需要网页编写者预先定义好 并且不能与浏览器的快
  • 井下设备类毕业论文文献包含哪些?

    本文是为大家整理的井下设备主题相关的10篇毕业论文文献 包括5篇期刊论文和5篇学位论文 为井下设备选题相关人员撰写毕业论文提供参考 1 期刊论文 变频器在井下设备中的应用 期刊 内蒙古煤炭经济 2019 年第 020 期 关键词 变频器 节
  • uni-app 的坑

    最近在开发一个新项目 使用的vue3 之前用的都是vue2 这不用不知道 一用吓一跳 看代码 data return searchText data 存储数据库的数据 methods async getData const db uniCl
  • git 上传任务用户显示错误修改方法

    目 录 0 问题描述 1 原因 2 步骤 3 总结 0 问题描述 使用git时候登陆自己的账号但每次提交任务显示的是其他人的信息 1 原因 git配置信息中用户名及用户邮箱显示是其他人 可以通过git config l进行查看 git co
  • ADW300物联网电表支持MODBUSTCP协议、MQTT协议-安科瑞黄安南

    摘要 随着通信技术的应用越来越广泛 具有通信功能的电子产品越来越多 同时也随着Wi Fi无线覆盖网络区域的形成 如何利用无线网络覆盖广 带宽高 低使用费率的优势组建物联网系统 变成了一个很实际的问题 安科瑞也紧跟趋势推出了满足客户需求的支持
  • git客户端安装并配置GitLab配置ssh key

    一 安装git客户端 打开Git的安装程序 点击Next之后 安装路径我保持默认选项 然后继续下一步 继续下一步 提示你创建开始菜单 我们继续下一步 上图默认的是第二项 但是我改成了第一项 不想在CMD下使用Git命令 继续下一步 继续下一
  • 【华为OD机试真题2023B卷 JAVA&JS】食堂供餐

    华为OD2023 B卷 机试题库全覆盖 刷题指南点这里 食堂供餐 知识点编程基础循环 时间限制 1s 空间限制 32MB 限定语言 不限 题目描述 某公司员工食堂以盒饭方式供餐 为将员工取餐排队时间降低为0 食堂的供餐速度必须要足够快 现在
  • 源码分析之——WMS启动流程

    1 源码分析之 AMS启动流程 2 源码分析之 WMS启动流程 3 源码分析之 SharedPreferences 4 源码分析之 Retrofit 5 源码分析之 OKHttp 6 源码分析之 Android事件分发机制 前言 上一节讲了
  • 解决Vue路由重复点击报错问题

    给一个元素绑定跳转路由的事件时 跳转后当我们重复点击时就会报以下错误 原因 vueRouter版本问题 解决方案1 降低VueRouter的版本 使用旧版本的VueRouter 3 0 xxx 解决方案2 跳转路径后 捕获异常 不做处理 这
  • PC 服务器故障处理方法

    计算机网络在发展的过程中 PC服务器的各项配置也在不断的升级和改善 随着人们对计算机网络流畅性需求的逐步增长 PC服务器的快速故障分析与维护处理也愈发重要 PC服务器常见的软件故障就是在开机时可能会产生的一系列软件冲突 PC服务器的硬件也可
  • 【详细深入分析OpenHarmony编译流程】

    详细深入分析OpenHarmony编译流程 前言 编译入口 源码根目录 编译命令 记录源码根目录位置 开始构建 获取python解释器 hb主程序 build模块初始化 build模块执行 build和set参数解析 参数配置文件读写 配置
  • 七牛云之微信小程序上传图片

    本节课 我讲的是微信小程序结合七牛云上传图片 仅仅讲如何上传图片并得到图片的云链接 首先 先到官网 https developer qiniu com kodo manual 1205 programming model 了解一下大致的业务
  • docker镜像和容器有什么区别?

    我这里拿大家熟知的VMware来举例 VMware安装虚拟机 gt 下载系统镜像 gt 在VMware里安装系统 gt 得到一个系统虚拟机 我们试着叫它实例 docker里也是类似 概念上 docker里的镜像 VMware里的镜像 doc
  • react实现分页-封装组件

    需求 根据后台的数据 判断是否有下一页 如果有下一页 用户上划加载更多调用接口 结合 antd mobile 的 ListView 组件实现 参数解释 dataSource 数据源 数组 currentPage 页数 initialList