文件分为三部分:index.js+PullUp.js+PullDown.js

index.js:better.scroll的初始化

PullUp.js:初始化上拉加载更多

PullDown.js:初始化下拉刷新功能

 

index.js

'use strict';Object.defineProperty(exports, "__esModule", {  value: true});var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();var _templateObject = _taggedTemplateLiteral(['\n  overflow: hidden;\n  position: relative; // \u53EF\u9632\u6B62 scrollbar \u8D85\u51FA wrapper \u9AD8\u5EA6\n'], ['\n  overflow: hidden;\n  position: relative; // \u53EF\u9632\u6B62 scrollbar \u8D85\u51FA wrapper \u9AD8\u5EA6\n']);var _react = require('react');var _react2 = _interopRequireDefault(_react);var _propTypes = require('prop-types');var _propTypes2 = _interopRequireDefault(_propTypes);var _styledComponents = require('styled-components');var _styledComponents2 = _interopRequireDefault(_styledComponents);var _betterScroll = require('better-scroll');var _betterScroll2 = _interopRequireDefault(_betterScroll);var _PullDown = require('./PullDown');var _PullDown2 = _interopRequireDefault(_PullDown);var _PullUp = require('./PullUp');var _PullUp2 = _interopRequireDefault(_PullUp);function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }var Wrapper = _styledComponents2.default.div(_templateObject);var Scroller = function (_PureComponent) {  _inherits(Scroller, _PureComponent);  function Scroller(props) {    _classCallCheck(this, Scroller);    var _this = _possibleConstructorReturn(this, (Scroller.__proto__ || Object.getPrototypeOf(Scroller)).call(this, props));    _this.state = {      pullDown: false,      pullUp: false    };    _this.wrapperRef = _react2.default.createRef();    return _this;  }  _createClass(Scroller, [{    key: 'componentDidMount',    value: function componentDidMount() {      var _props = this.props,          options = _props.options,          onPullDown = _props.onPullDown,          onPullUp = _props.onPullUp;      var opts = _extends({        scrollbar: { fade: true },        click: true      }, options);      var state = {};      if (onPullDown) {        opts.pullDownRefresh = { threshold: 60, stop: 60 };        state.pullDown = true;      }      if (onPullUp) {        opts.pullUpLoad = { threshold: 60 };        state.pullUp = true;      }      this.bScroll = new _betterScroll2.default(this.wrapperRef.current, opts);      if (Object.keys(state).length) {        this.setState(state);      }    }  }, {    key: 'render',    value: function render() {      var _props2 = this.props,          children = _props2.children,          onPullDown = _props2.onPullDown,          onPullUp = _props2.onPullUp,          className = _props2.className;      var _state = this.state,          pullDown = _state.pullDown,          pullUp = _state.pullUp;      return _react2.default.createElement(        Wrapper,        { className: className, innerRef: this.wrapperRef },        _react2.default.createElement(          'div',          { className: 'bScroll-content' },          children,          pullUp ? _react2.default.createElement(_PullUp2.default, { bScroll: this.bScroll, onPullUp: onPullUp }) : null        ),        pullDown ? _react2.default.createElement(_PullDown2.default, { bScroll: this.bScroll, onPullDown: onPullDown }) : null      );    }  }]);  return Scroller;}(_react.PureComponent);Scroller.propTypes = {  options: _propTypes2.default.object,  children: _propTypes2.default.any,  onPullDown: _propTypes2.default.func,  onPullUp: _propTypes2.default.func,  className: _propTypes2.default.string};Scroller.defaultProps = {  options: {},  children: null,  onPullDown: null,  onPullUp: null,  className: 'bScroll'};exports.default = Scroller; PullUp.js

'use strict';Object.defineProperty(exports, "__esModule", {  value: true});var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();var _templateObject = _taggedTemplateLiteral(['\n  width: 100%;\n  height: 60px;\n'], ['\n  width: 100%;\n  height: 60px;\n']),    _templateObject2 = _taggedTemplateLiteral(['\n  height: 100%;\n  line-height: 60px;\n  text-align: center;\n'], ['\n  height: 100%;\n  line-height: 60px;\n  text-align: center;\n']),    _templateObject3 = _taggedTemplateLiteral(['\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n'], ['\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n']);var _react = require('react');var _react2 = _interopRequireDefault(_react);var _propTypes = require('prop-types');var _propTypes2 = _interopRequireDefault(_propTypes);var _styledComponents = require('styled-components');var _styledComponents2 = _interopRequireDefault(_styledComponents);var _spin = require('../spin');var _spin2 = _interopRequireDefault(_spin);function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }var Wrapper = _styledComponents2.default.div(_templateObject);var Before = _styledComponents2.default.div(_templateObject2);var After = _styledComponents2.default.div(_templateObject3);var PullUp = function (_PureComponent) {  _inherits(PullUp, _PureComponent);  function PullUp(props) {    _classCallCheck(this, PullUp);    var _this = _possibleConstructorReturn(this, (PullUp.__proto__ || Object.getPrototypeOf(PullUp)).call(this, props));    _this.state = {      loading: false,      text: '加载更多'    };    return _this;  }  _createClass(PullUp, [{    key: 'componentDidMount',    value: function componentDidMount() {      var _this2 = this;      var _props = this.props,          bScroll = _props.bScroll,          onPullUp = _props.onPullUp;      bScroll.on('pullingUp', function () {        _this2.setState({ loading: true });        var result = onPullUp();        if (!result) {          _this2.setState({ loading: false, text: '没有更多数据了~' });          bScroll.finishPullUp();        } else {          result.then(function () {            _this2.setState({ loading: false, text: '加载更多' });            bScroll.finishPullUp();            bScroll.refresh();          });        }      });    }  }, {    key: 'render',    value: function render() {      var _state = this.state,          loading = _state.loading,          text = _state.text;      var beforeStyle = { display: !loading ? 'block' : 'none' };      return _react2.default.createElement(        Wrapper,        null,        _react2.default.createElement(          Before,          { style: beforeStyle },          text        ),        loading ? _react2.default.createElement(          After,          null,          _react2.default.createElement(_spin2.default, { size: '32px' })        ) : null      );    }  }]);  return PullUp;}(_react.PureComponent);PullUp.propTypes = {  bScroll: _propTypes2.default.object.isRequired,  onPullUp: _propTypes2.default.func.isRequired};exports.default = PullUp; PullDown.js

'use strict';Object.defineProperty(exports, "__esModule", {  value: true});var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();var _templateObject = _taggedTemplateLiteral(['\n  position: absolute;\n  width: 100%;\n  height: 60px;\n  left: 0;\n'], ['\n  position: absolute;\n  width: 100%;\n  height: 60px;\n  left: 0;\n']),    _templateObject2 = _taggedTemplateLiteral(['\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  \n  .icon {\n    width: 32px;\n    height: 32px;\n    \n    &.flip {\n      transform: rotate(-180deg) translateZ(0);  \n    }\n  }\n'], ['\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  \n  .icon {\n    width: 32px;\n    height: 32px;\n    \n    &.flip {\n      transform: rotate(-180deg) translateZ(0);  \n    }\n  }\n']),    _templateObject3 = _taggedTemplateLiteral(['\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n'], ['\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n']);var _react = require('react');var _react2 = _interopRequireDefault(_react);var _propTypes = require('prop-types');var _propTypes2 = _interopRequireDefault(_propTypes);var _styledComponents = require('styled-components');var _styledComponents2 = _interopRequireDefault(_styledComponents);var _ArrowDown = require('../icons/ArrowDown');var _ArrowDown2 = _interopRequireDefault(_ArrowDown);var _spin = require('../spin');var _spin2 = _interopRequireDefault(_spin);function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }var Wrapper = _styledComponents2.default.div(_templateObject);var Before = _styledComponents2.default.div(_templateObject2);var After = _styledComponents2.default.div(_templateObject3);var PullDown = function (_PureComponent) {  _inherits(PullDown, _PureComponent);  function PullDown(props) {    _classCallCheck(this, PullDown);    var _this = _possibleConstructorReturn(this, (PullDown.__proto__ || Object.getPrototypeOf(PullDown)).call(this, props));    _this.isRebounding = false;    _this.initTop = -60;    _this.initState = {      top: _this.initTop + 'px',      before: true,      isFlip: false    };    _this.state = _this.initState;    return _this;  }  _createClass(PullDown, [{    key: 'componentDidMount',    value: function componentDidMount() {      var _this2 = this;      var _props = this.props,          bScroll = _props.bScroll,          onPullDown = _props.onPullDown;      bScroll.on('pullingDown', function () {        _this2.setState({ before: false });        onPullDown().then(function () {          _this2.isRebounding = true;          bScroll.finishPullDown();          setTimeout(function () {            _this2.setState(_this2.initState);            _this2.isRebounding = false;            bScroll.refresh();          }, bScroll.options.bounceTime);        });      });      bScroll.on('scroll', function (pos) {        var state = {};        if (_this2.state.before) {          state.top = Math.min(pos.y + _this2.initTop, 0) + 'px';        }        if (pos.y >= 60) {          state.isFlip = true;        }        if (_this2.isRebounding) {          state.top = 0 - (60 - pos.y) + 'px';        }        if (Object.keys(state).length) {          _this2.setState(state);        }      });    }  }, {    key: 'render',    value: function render() {      var _state = this.state,          top = _state.top,          before = _state.before,          isFlip = _state.isFlip;      var wrapperStyle = { top: top };      var ArrowIconClassName = isFlip ? 'icon flip' : 'icon';      return _react2.default.createElement(        Wrapper,        { style: wrapperStyle },        before ? _react2.default.createElement(          Before,          null,          _react2.default.createElement(_ArrowDown2.default, { className: ArrowIconClassName })        ) : null,        before ? null : _react2.default.createElement(          After,          null,          _react2.default.createElement(_spin2.default, { size: '32px' })        )      );    }  }]);  return PullDown;}(_react.PureComponent);PullDown.propTypes = {  bScroll: _propTypes2.default.object.isRequired,  onPullDown: _propTypes2.default.func.isRequired};exports.default = PullDown;