react-fast-scroll v1.0.4

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文档

参数设置

License

The MIT License (MIT)

Copyright (c) 2020 Peter

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.