前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >FlatList ListView SectionList 下拉刷新 上拉加载 彻底解决

FlatList ListView SectionList 下拉刷新 上拉加载 彻底解决

作者头像
onety码生
发布于 2018-11-21 03:43:40
发布于 2018-11-21 03:43:40
4K00
代码可运行
举报
文章被收录于专栏:码生码生
运行总次数:0
代码可运行

关于 RN 里面的上拉加载一直是个问题。

至于 FlatList SectionList 自带的上拉加载功能,根本就是骗人的。

不满屏就回调,上拉若干次后则不再回调

等等,且不想再吐槽。

其实就是个小问题,解决就行了。

早就有这个问题,也早就解决了,今天有人问我这个问题,顺便就封装了一下。

有点:

  • 支持上拉和下拉刷新
  • 不用做任何标志位标志上拉下拉
  • 支持无更多数据功能
  • 支持代码使其自动下拉刷新(场景:第一次页面加载完毕,自动下拉)
  • 内容超过屏幕,距离滑动到底部 30 单位,自动回调上拉

待完善:

  • 支持自定义上拉、下拉提示文本
  • 支持自定义距离上拉完毕一定距离触发上拉回调。默认 30

其实是没必要的完善。每个项目的风格只会存在一套。又不是每个地方都需要设置,拿到源码,刷刷的改几个字就可以了嘛。封装这些功能,真不如做个健身操来的实在

refresh.gif

源码贡献:

npm 引入:"react-native-kk-refresh": "1.0.0"

npm 源码:react-native-kk-refresh

github 源码: https://github.com/TieShanWang/react-native-refresh.git

------------- 更新到 1.1.2 ---------------

github 源码已经更新。但是 npm 还没有更新

----------------------------- 更新 -----------------------

只更新了 github 源码

更新内容

  • 修复了有时上拉加载还会加载两次的问题。更加稳定。
  • 增加了对空视图的兼容。当没有内容时,可自定义空视图内容
    • 可使用默认模板:从上到下。图片、标题、副标题、按钮。每个均可自定义样式
    • 可使用自定义空视图
  • iOS增加了上拉加载手机震动 目前我使用的 0.50.3 RN 自带的震动是强震动。原生我兼容了增加弱震动的方法(另外一个库) 也就是
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import {vibrate} from "@shenmajr/shenmajr-react-native-systemapi/NativeSystemApi";

使用的时候,可以将此行代码屏蔽,使用 vibrate 的地方代码删除即可

或者原生实现 vibrate 方法,弱震动。根据需求

仔细想想还是给个使用 demo 吧

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/// 使用此刷新 FlatList 不用考虑刷新的状态和控制刷新的状态。
/// 只需要在回调中做网络请求,然后 end 来结束刷新/加载
/// 除了 noMoreData (无更多数据)外,不需要做任何的标志位标识刷新状态
<SMRefreshFlatListView
                        /// 标识是否无更多数据,当为 true 时,尾部展示 无更多数据。并且上拉加载功能失效
                       noMoreData={this.state.noMoreData}

                        /// 当下拉刷新时的回调,当网络请求完成时调用 end(),来结束此次下拉刷新
                       onRefresh={(end)=>{
                           /// 耗时操作,例如网络请求
                           /// end() 结束刷新
                       }}

                        /// 当上拉加载时的回调,当网络请求完成时调用 end(),来结束此次下拉刷新
                        /// 默认上拉加载的距离为 30。
                       onLoading={(end)=>{
                           /// 耗时操作,例如网络请求
                           /// end() 结束上拉加载
                       }}

                        /// 当 FlatList 组件初始化完成时的回调,回调一个 begin 方法。调用此方法可以主动使 FlatList 刷新
                        /// 保存此 begin 方法,在合适的时机(例如: componentDidMount)可以调用 begin 方法,主动刷新
                        /// 以实现进入此界面时,主动下拉刷新
                       beginRefresh={begin=>this.begin=begin}

                       /// 使用默认的空视图
                        emptyDefaultView={{
                            /// 配置图片
                            emptyImage: required('./empty.png'),
                            /// 配置标题
                            emptyTitle: {
                                title: '暂无数据',
                                titleStyle: {color: 'black'},
                            },
                            emptyButton: {
                                title: '点击刷新',
                            }
                        }}

下拉刷新使用 MJRefresh

请参考我的另外一篇文章 https://cloud.tencent.com/developer/article/1365865

RN 自带的 RefreshControl 是 UIRefreshControl,并且还自己写了自动偏移,存在有时不能回弹和不可以自定义视图的问题

iOS 如上文章修改后,可以将 RN 中所有的下拉刷新更改为 MJRefresh或者项目中自己的刷新组件(自定义刷新组件)。

更改为 MJRefresh 后,刷新效果和原生一样。

刷新修改后,真的还能看出来是 RN 还是原生APP吗?

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.08.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
react native实现上拉加载下拉刷新
前言 我们在做原生app开发的时候,很多场景都会用到下拉刷新、上拉加载的操作,Android中如PullToRefreshListView,ios中如MJRefresh等都是比较好用,且实现上比较简单的第三方库。他们的实现原理大体相同,都是在列表的基础上新增头部和尾部,然后新增手势触摸的逻辑判断。那么对于react native,我们也可以用相同的原理来实现。 react-native-pull 这里我们首先要介绍一款兼容Android和ios的组件:react-native-pull 我们首先来看一下
xiangzhihong
2018/02/06
4.7K0
react native实现上拉加载下拉刷新
OpenHarmony环境下可用的下拉刷新、上拉加载组件【PullToRefresh】
其中List组件需要设置edgeEffect属性为(EdgeEffect.None)
小帅聊鸿蒙
2024/09/18
1420
OpenHarmony环境下可用的下拉刷新、上拉加载组件【PullToRefresh】
Flutter 中的下拉刷新和上拉加载
在Flutter的官方SDK中给我们提供了下拉刷新的组件RefreshIndicator,但是没有提供上拉分页加载更多的组件。不过不用担心,在Flutter的ListView组件中,有一个ScrollController属性,它就是专门用来控制ListView滑动事件,在这里我们可以根据ListView的位置来判断是否滑动到了底部来做加载更多的处理。
拉维
2019/09/05
4.1K0
Flutter ListView 下拉刷新,上拉加载更多
正常项目中使用ListView一定会涉及到分页加载的问题,此时无法避免地需要用到下拉刷新和上拉加载更多的功能。
毛大姑娘
2020/09/10
3.6K0
Flutter ListView 下拉刷新,上拉加载更多
Flutter 库:强大的下拉刷新上拉加载框架——EasyRefresh
EasyRefresh 是一个用于 Flutter 应用程序的简单易用的下拉刷新和上拉加载框架。它支持几乎所有的 Flutter 可滚动小部件。它的功能与Android 的 SmartRefreshLayout 非常相似,并吸收了许多第三方库的优点。EasyRefresh 集成了各种样式的页眉和页脚,但没有任何限制,您可以轻松自定义它们。利用Flutter强大的动画功能,即使只是一个简单的控件也可以实现复杂的效果。EasyRefresh的目标是为Flutter创建一个功能强大、稳定和成熟的下拉刷新框架。
訾博ZiBo
2025/01/06
2080
Flutter 库:强大的下拉刷新上拉加载框架——EasyRefresh
移动端上拉加载和下拉刷新的vue插件
npm install --save mescroll.js //不要使用cnpm安装
一墨编程学习
2018/10/22
4.8K0
移动端下拉刷新和上拉加载实现
最近在做移动端开发,移动端的性能不如 PC 端,屏幕页没有 PC 大,需要我们优化的东西很多;在工作中我所做的移动端小页面,无一例外的都是将网页嵌入到安卓或者 IOS 里面去。
sunseekers
2019/08/09
1.7K0
vue 的上拉加载,下拉刷新(基于better-scrol)
我先吐槽下,这个vue 的上拉刷新前几次都是有现成的框架,来做的,这个better-scroll的我是真的一开始没有看懂,可能是自己太笨了吧,不过 写这个的真的是大神,很厉害,个人项目做的这么厉害,666附上地址
我乃小神神
2019/03/20
2.6K0
vue 的上拉加载,下拉刷新(基于better-scrol)
【IOS开发基础系列】下拉刷新专题
        如果你装了xcode_4.5_developer_preview,那么在UITableViewController.h文件中你会看到,UITableViewController里面有如下声明,说明UITableViewController已经内置了UIRefreshControl控件
江中散人_Jun
2023/10/16
2130
【IOS开发基础系列】下拉刷新专题
上拉加载下拉刷新了解下
1.界面上,只分成简单的两块,一块是上方的刷新文字,一块是下方的内容,然后将上方提示内容隐藏在屏幕之外,一般由两种方式,一种是上面遮一层,另一种是marginTop:负值将其弄出屏幕外,这里我采用的是第一种,代码也很简单,就随便贴一下
IMWeb前端团队
2019/12/03
1.7K0
上拉加载下拉刷新了解下
自定义SwipeRefreshLayout实现ListView上拉加载下拉刷新
说实话现在大部分人都不在用ListView了,不过说实话如果仅仅是普通的列表其实用哪个都无所谓的。 可能有人会说有好多第三方的下拉刷新上拉加载的框架,但是我觉得吧,有些东西自己能实现的就还是用自己写的好。 不罗嗦了,直接上代码,注释都已写好
longzeqiu
2019/08/14
1.3K0
Flutter中实现下拉刷新与上拉加载更多
其基本的实现方法是在该组件添加onRefresh事件,当用户下拉刷新时会触发该事件,在该事件中可以用调用一个延时任务Future.delayed( ),在延时任务的回调中重新请求数据即可。
越陌度阡
2021/01/13
3.4K0
react native 自定义下拉刷新——桥接MJRefresh
0、React Native 中的下拉刷新、上拉更多一直是一个很让人头疼的问题,RN中的API只能使用默认的UIRefreshControl,定制和体验上都很差,下面我通过修改系统组件的方法桥接一个原生中常用的三方库 MJRefresh ,至于上拉更多我一般使用react-native-giftedListView,可以和我这个桥接完美结合。https://github.com/XHTeng/react-native-gifted-listview 注意:该方法的缺点是每次更新react-native
用户2141756
2018/05/18
2.2K0
微信小程序----列表下拉刷新上拉加载(MUI下拉刷新和上拉加载更多)
效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改! 页
Rattenking
2021/02/01
1.9K0
微信小程序----列表下拉刷新上拉加载(MUI下拉刷新和上拉加载更多)
实现 iOS 无感知上拉加载更多
什么是无感知,这个这样理解:在网络情况正常的情况下,用户对列表进行连续的上拉时,该列表可以无卡顿不停出现新的数据。
网罗开发
2021/08/13
2.4K0
React Native列表之FlatList开发实用教程
在APP开发过程中,列表可谓是页面最重要的一种展现形式了,几乎每一个APP都离不了列表,那么在这篇文章中将向大家分享在React Native中该如何实现列表,以及FlatList的原理和实用指南。
CrazyCodeBoy
2019/12/10
6.6K0
React Native列表之FlatList开发实用教程
微信小程序之上拉加载与下拉刷新
在移动端,随着手指不断向上滑动,当内容将要到达屏幕底部的时候,页面会随之不断的加载后续内容,直到没有新内容为止(我们是有底线的-o-),我们称之为上拉加载,从技术角度来说,也可以称之为触底加载。
一斤代码
2018/08/21
4.4K1
微信小程序之上拉加载与下拉刷新
移动端下拉刷新、上拉加载更多 Jquery插件 dropload
a javascript implementation of pull to refresh and up to loadmore 移动端下拉刷新、上拉加载更多插件
王念博客
2019/07/25
6K0
iOS小技能:下拉刷新控件的适配
前言 下拉顶部背景色设置: 往tableView的父控件添加拉伸背景视图 present 半屏适配 iOS13 modalPresentationStyle属性默认不是全屏样式UIModalPresentationFullScreen,而是半屏样式,需要根据需求手动设置。present 半屏,会导致列表下拉刷新失效。 I 下拉刷新适配 1.1 下拉顶部背景色设置 在这里插入图片描述 设置下拉样式 #import <MJRefresh/MJRefresh.h> @interface ERPMJRefres
公众号iOS逆向
2022/08/22
9180
iOS小技能:下拉刷新控件的适配
安卓下拉刷新组件
https://github.com/scwang90/SmartRefreshLayout/
阿超
2024/08/23
1380
相关推荐
react native实现上拉加载下拉刷新
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验