better-scroll:在react中用better-scroll封裝一個滾動的組件

文件分為三部分: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;