react-fast-scroll: A JavaScript repository from 3Spiders

react-fast-scroll

前言

这是一个上拉加载，下拉刷新的组件。在 Android 和 RN（React Native）里称为滚动容器（ScrollView）。这个项目是基于CRA（Create React App）搭建的，代码全部采用 TS（TypeScript）编写，核心引擎部分不掺杂框架代码，如果使用React，Vue，Angular，或者原生JS的，可以自己扩展，目前只支持React版本。在设计之初，借鉴了 minirefresh 和 better-scroll 的设计，它们都是很不错的滚动组件。

快速开始

npm install react-fast-scroll

# 或者
yarn add react-fast-scroll

最小原型

下面是采用函数组件的写法。传入上拉（pullUp），下拉（pullDown）回调。

const Demo = () => {
  const pullDown = () => {
    console.log('pullDown');
    return new Promise(resolve => {
      setTimeout(() => {
        console.log('pullDown resolve');
        resolve(false);
      }, 2000);
    });
  };

  const pullUp = () => {
    console.log('pullUp');
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(false);
        console.log('pullUp resolve');
      }, 2000);
    });
  };

  return (
    <ScrollView
      pullDown={pullDown}
      pullUp={pullUp}
    >
      <div>滚动内容</div>
    </ScrollView>
  )
}

查看Demo

我们准备了很多使用例子，全在 example目录下，启动项目，即可看到效果。

下载项目到本地并且切换到项目根目录

yarn install

yarn start

原理

下拉刷新。实际上是利用 touch 事件，判断当滚动容器的 scrollTop 为0时，解锁 touch 事件，记录用户的下拉的距离，用 transform 同步下移视图。

上拉加载。利用 scroll 事件，监听元素的滚动事件，用容器滚动的总高度（scrollHeight），减去当前区域可见高度（clientHeight ）和 scrollTop，当这个值小于等于零时，代表已经到底，可以触发上拉事件。

API文档

参数设置

参数	值类型	默认值	含义
container	HTMLElement		滚动容器的DOM
isUseBodyScroll	boolean	false	是否使用body滚动，如果是全屏滚动，开启之后可优化性能，但是每一个页面只允许拥有一个滚动实例
isLockX	boolean	false	设置是否锁定纵向的滚动
throttle	boolean	false	是否开启滚动截流
throttleTime	number	0	滚动截流的时间间隔
isScrollBar	boolean	true	是否有滚动条
down	object		下拉刷新配置项
down.enable	boolean	true	是否允许下拉
down.offset	number	100	移动多少距离，才能触发下拉条件
down.bounceTime	number	300	下拉之后，下拉区域的回弹速度
down.dampRateBegin	number	1	阻尼系数，下拉小于offset时的阻尼系数，越小越难拉。
down.dampRate	number	1	阻尼系数，下拉超过阈值后的阻尼系数，越小越难拉。
up	object		上拉加载配置项
up.enable	boolean	true	是否允许上拉
up.offset	number	0	距离底部多少距离，触发上拉加载
up.isAutoLoad	boolean	true	进入页面，自动调下拉接口
up.loadFull	object		当数据不足一屏幕时的配置项
up.loadFull.enable	boolean	true	是否让ScrollView帮你自动加载后面的数组
up.loadFull.loadCount	number	3	连续加载多少次

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

3Spiders/react-fast-scroll