├── .babelrc
├── .gitignore
├── README.md
├── _config.yml
├── dist
└── bundle.js
├── erweima.png
├── example
├── .gitignore
├── README.md
├── build
│ ├── asset-manifest.json
│ ├── favicon.ico
│ ├── index.html
│ ├── manifest.json
│ ├── service-worker.js
│ └── static
│ │ ├── css
│ │ ├── main.f8ccf616.css
│ │ └── main.f8ccf616.css.map
│ │ └── js
│ │ ├── main.cfdfafeb.js
│ │ └── main.cfdfafeb.js.map
├── config
│ ├── env.js
│ ├── jest
│ │ ├── cssTransform.js
│ │ └── fileTransform.js
│ ├── paths.js
│ ├── polyfills.js
│ ├── webpack.config.dev.js
│ ├── webpack.config.prod.js
│ └── webpackDevServer.config.js
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── scripts
│ ├── build.js
│ ├── start.js
│ └── test.js
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock
├── package.json
├── src
├── backTop.js
├── imgs
│ ├── backTop.png
│ ├── fail.png
│ ├── loading.png
│ ├── pull.png
│ └── success.png
├── index.js
└── style.less
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env", "react", "stage-1"],
3 | "plugins": [
4 | [
5 | "transform-runtime",
6 | {
7 | "helpers": false,
8 | "polyfill": false,
9 | "regenerator": true,
10 | "moduleName": "babel-runtime"
11 | }
12 | ]]
13 | }
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 | /.idea
3 |
4 | # dependencies
5 | /node_modules
6 |
7 | # testing
8 | /coverage
9 |
10 | # misc
11 | .DS_Store
12 | .env.local
13 | .env.development.local
14 | .env.test.local
15 | .env.production.local
16 |
17 |
18 | npm-debug.log*
19 | yarn-debug.log*
20 | yarn-error.log*
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-scroll-mobile
2 | ---
3 |
4 | 1. react移动端滚动组件,支持上拉加载、下拉刷新、返回顶部。
5 | 2. [项目源码](https://github.com/Fuphoenixes/react-scroll-mobile)
6 | 3. 觉得好用给个star，谢啦！
7 |
8 | ## example
9 | 
10 |
11 | ## Install
12 |
13 | ```
14 | npm install react-scroll-mobile
15 | ```
16 | 或
17 | ```
18 | yarn add react-scroll-mobile
19 | ```
20 |
21 | ## Usage
22 |
23 | ```
24 | import Scroll from 'react-scroll-mobile'
25 |
26 | const timeout = delay => new Promise(resolve => setTimeout(resolve,delay));
27 |
28 | class App extends Component {
29 |
30 | state = {
31 | list:[],
32 | noMore: false
33 | }
34 |
35 | pageIndex = 1;
36 |
37 | componentDidMount(){
38 | //首次加载时，可以主动触发下拉加载动效，更炫酷
39 | this.scrollRef.pullDownRefresh(this.pullDownRefresh)
40 | }
41 |
42 | pullDownRefresh = async ()=>{
43 | this.pageIndex = 1;
44 | await this.getData();
45 | };
46 |
47 | pullUpLoad = async ()=>{
48 | this.pageIndex ++;
49 | await this.getData();
50 | };
51 |
52 | getData = async ()=>{
53 | //模拟请求和数据
54 | await timeout(1000);
55 | let res = [0,1,2,3,4,5,6,7,8,9];
56 | // 模拟没有数据了
57 | if(this.pageIndex > 4 )res = [];
58 |
59 | const list = this.pageIndex === 1 ? res : this.state.list.concat(res);
60 | this.setState({
61 | list,
62 | noMore: res.length === 0
63 | })
64 | }
65 |
66 | render() {
67 | const { list, noMore } = this.state;
68 |
69 | return (
70 |
71 |
this.scrollRef = el}
73 | pullDownRefresh={this.pullDownRefresh}
74 | pullUpLoad={this.pullUpLoad}
75 | noMore={noMore}
76 | backTop
77 | >
78 |
79 | {
80 | list.map((item,index)=>- 数据数据数据数据{index}
)
81 | }
82 |
83 |
84 |
.
77 | // This should only be used as an escape hatch. Normally you would put
78 | // images into the `src` and `import` them in code to get their paths.
79 | PUBLIC_URL: publicUrl,
80 | }
81 | );
82 | // Stringify all values so we can feed into Webpack DefinePlugin
83 | const stringified = {
84 | 'process.env': Object.keys(raw).reduce((env, key) => {
85 | env[key] = JSON.stringify(raw[key]);
86 | return env;
87 | }, {}),
88 | };
89 |
90 | return { raw, stringified };
91 | }
92 |
93 | module.exports = getClientEnvironment;
94 |
--------------------------------------------------------------------------------
/example/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // This is a custom Jest transformer turning style imports into empty objects.
4 | // http://facebook.github.io/jest/docs/en/webpack.html
5 |
6 | module.exports = {
7 | process() {
8 | return 'module.exports = {};';
9 | },
10 | getCacheKey() {
11 | // The output is always the same.
12 | return 'cssTransform';
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/example/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 |
5 | // This is a custom Jest transformer turning file imports into filenames.
6 | // http://facebook.github.io/jest/docs/en/webpack.html
7 |
8 | module.exports = {
9 | process(src, filename) {
10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/example/config/paths.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const fs = require('fs');
5 | const url = require('url');
6 |
7 | // Make sure any symlinks in the project folder are resolved:
8 | // https://github.com/facebookincubator/create-react-app/issues/637
9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 |
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 |
14 | function ensureSlash(path, needsSlash) {
15 | const hasSlash = path.endsWith('/');
16 | if (hasSlash && !needsSlash) {
17 | return path.substr(path, path.length - 1);
18 | } else if (!hasSlash && needsSlash) {
19 | return `${path}/`;
20 | } else {
21 | return path;
22 | }
23 | }
24 |
25 | const getPublicUrl = appPackageJson =>
26 | envPublicUrl || require(appPackageJson).homepage;
27 |
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right