bestnihon-react-components - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

es/index.js

@@ -6,2 +6,6 @@ import _NavBar from './NavBar/NavBar';
 import _TabContainerItem from './TabContainerItem/TabContainerItem';
-export { _TabContainerItem as TabContainerItem };
+export { _TabContainerItem as TabContainerItem };
+import _ScrollView from './ScrollView/ScrollView.js';
+export { _ScrollView as ScrollView };
+import _LozyLoad from './LazyLoad//LazyLoad.js';
+export { _LozyLoad as LozyLoad };

es/NavBar/NavBar.js

@@ -12,3 +12,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
     1. bar 中无其他样式,bar 点击后 bar 的图标无变化,只是颜色字体变化
-    2. bar 中有其他样式, bar点击后 bar 的图标和颜色发生变化,所以需要有个 NavItem来配合
+
+   TODO: 2. bar 中有其他样式, bar点击后 bar 的图标和颜色发生变化,所以需要有个 NavItem来配合
 */
@@ -24,5 +25,6 @@ /* 定义:
 
-    TODO: 功能点==> 当 NavBar 与 TabContainer 搭配使用时, TabContainer 滑动, Nav的 Bar 也随着同步移动
+    TODO: 完成!!!!!
+       功能点==> 当 NavBar 与 TabContainer 搭配使用时, TabContainer 滑动, Nav的 Bar 也随着同步移动
     translate: 通过 TabContianer 回调传过来的 移动值
-      实际的值应该根据 NavBar 的 length 来算, translate = translate / length, 应当为 1: length
+      实际的值应该根据 NavBar 的 length 来算, translate = translate / length, 应当为 1: length 
       
@@ -39,3 +41,22 @@ */
 
+    _this.translateBar = function (s) {
+      var _this$props = _this.props,
+          NavData = _this$props.NavData,
+          children = _this$props.children;
+
+      var length = NavData ? NavData.length : children.length;
+      // console.log('ssss', s)
+      var distance = s.distance,
+          transition = s.transition;
+
+      if (_this.bar) {
+        // 不连写的原因是 防止以后添加其他属性 会覆盖
+        transition ? _this.bar.style.transition = 'all 200ms' : _this.bar.style.transition = 'none';
+        _this.bar.style.transform = 'translateX(' + -distance / length + 'px)';
+      }
+    };
+
     _this.sel = function (item, index) {
+      // 防止出现不需要 bar 的情况
+      _this.bar && (_this.bar.style.transition = 'all 200ms');
       var ind = _this.state.ind;
@@ -47,9 +68,8 @@ // 函数节流
 
+      onSel && onSel(item, index);
       _this.setState({ ind: index });
-      onSel && onSel(item, index);
     };
 
     _this.state = {
-      ind: props.ind || 0,
-      translate: props.translateX
+      ind: props.index || 0
     };
@@ -59,2 +79,15 @@ return _this;
 
+  NavBar.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    // console.log('Nav_nextProps', nextProps)
+    var index = nextProps.index,
+        translate = nextProps.translate;
+    var ind = this.state.ind;
+
+    if (index >= 0 && index !== ind) {
+      this.setState({ ind: index });
+    } else {
+      translate && this.translateBar(translate);
+    }
+  };
+
   NavBar.prototype.render = function render() {
@@ -65,13 +98,16 @@ var _this2 = this;
         ind = _state.ind,
-        translate = _state.translate;
+        translate = _state.translate,
+        newInd = _state.newInd;
     var _props = this.props,
         NavData = _props.NavData,
-        children = _props.children;
+        children = _props.children,
+        style = _props.style;
 
-    var itemWidth = NavData ? 100 / NavData.length : 100 / children.length;
-    // 同步移动
-    this.bar && (this.bar.style.transform = 'translateX(' + translate + 'px)');
+    var itemWidth = NavData ? window.screen.width / NavData.length : window.screen.width / children.length;
+    // console.log('ind', ind)
     return React.createElement(
       'div',
-      { className: 'NavBar-root' },
+      { style: style, className: 'NavBar-root', ref: function ref(node) {
+          _this2.container = node;
+        } },
       NavData ? NavData.map(function (item, index) {
@@ -82,3 +118,3 @@ return React.createElement(
             key: 'Nav' + index,
-            style: { width: itemWidth + '%' },
+            style: { width: itemWidth + 'px' },
             className: 'Nav-item',
@@ -95,3 +131,3 @@ onClick: function onClick() {
             key: 'Nav' + index,
-            style: { width: itemWidth + '%' },
+            style: { width: itemWidth + 'px' },
             className: 'Nav-item',
@@ -104,3 +140,3 @@ onClick: function onClick() {
       }),
-      React.createElement('div', { className: 'Nav-active', style: { width: itemWidth + '%', left: ind * itemWidth + '%' }, ref: function ref(node) {
+      React.createElement('div', { className: 'Nav-active', style: { width: itemWidth + 'px', transform: 'translatex(' + ind * itemWidth + 'px)' }, ref: function ref(node) {
           return _this2.bar = node;
@@ -107,0 +143,0 @@ } })

es/ScrollView/ScrollView.js

@@ -13,9 +13,8 @@ import _regeneratorRuntime from 'babel-runtime/regenerator';
 import './ScrollView.css';
-import { isArray } from 'util';
+var TOP = 'top';
+var BOTTOM = 'bottom';
+var LOADING = 'loading';
 
-/* 
-    实现一个小程序的 scrollview
-    TIP: 使用竖向滚动时 必须给予 scrollview 一个高度
-        如果横向也需要上拉加载,下拉刷新的话 也必须传递一个宽度
-*/
+var TOUCH_TOP = 'touch_top';
+var TOUCH_BOTTOM = 'touch_bottom';
 
@@ -32,161 +31,173 @@ var ScrollView = function (_Component) {
 
-    _this.getChildrenAttr = function () {
-      var scrollX = _this.state.scrollX;
-
-      var children = _this.container.children;
-      var res = 0;
-      var attr = scrollX ? 'width' : 'height';
-      for (var i = 0; i < children.length; i++) {
-        res += parseFloat(window.getComputedStyle(children[i], null)[attr]);
-      }
-      return res;
+    _this.handleTouchStart = function (e) {
+      console.log('触摸开始', _this.wrap.scrollTop);
+      _this.startY = e.touches[0].clientY;
     };
 
-    _this.setbasic = function () {
-      var scrollX = _this.state.scrollX;
+    _this.handleTouchMove = function (e) {
+      var _this$state = _this.state,
+          isPullDown = _this$state.isPullDown,
+          isPullUp = _this$state.isPullUp,
+          topDistance = _this$state.topDistance,
+          bottomDistance = _this$state.bottomDistance,
+          isPullDownStatus = _this$state.isPullDownStatus,
+          isPullUpStatus = _this$state.isPullUpStatus;
 
-      var fillInAttr = void 0;
-      var childrenAttr = _this.getChildrenAttr();
-      console.log('childrenAttr', childrenAttr, _this.pullDownBarAttr, _this.pullUpBarAttr);
-      if (childrenAttr < _this.viewAttr) {
-        // scroll高度 - 子元素高度 + 两个 bar 的高度 || 宽度
-        var pullDownBarAttr = _this.pullDownBarAttr ? _this.pullDownBarAttr : 0;
-        var pullUpBarAttr = _this.pullUpBarAttr ? _this.pullUpBarAttr : 0;
-        fillInAttr = _this.viewAttr - childrenAttr;
-        _this.setState({ fillInAttr: fillInAttr }, function () {
-          return _this.setTarget();
+      var scrollTop = _this.wrap.scrollTop;
+      var moveY = e.touches[0].clientY;
+      var distance = void 0;
+      _this.direction = moveY - _this.startY > 0 ? TOUCH_BOTTOM : TOUCH_TOP;
+      console.log('滚动距离==>' + scrollTop, '上拉加载距离==>' + _this.bottom);
+      if (isPullDown && _this.direction === TOUCH_BOTTOM && scrollTop === 0 && isPullDownStatus !== LOADING && !isPullUpStatus) {
+        event.preventDefault();
+        // event.stopPropagation();
+        _this.pullDownBarStartY = _this.pullDownBarStartY ? _this.pullDownBarStartY : e.touches[0].clientY;
+        distance = (moveY - _this.pullDownBarStartY) / _this.limit;
+        _this.translate(distance, false);
+        _this.setState({
+          isPullDownStatus: distance >= topDistance ? TOP : BOTTOM
         });
-      }
-      console.log(fillInAttr);
-      !fillInAttr && _this.setTarget();
-    };
-
-    _this.isFillIn = function () {
-      if (_this.getChildrenAttr() >= _this.viewAttr) {
+        console.log('开启下拉刷新', distance, distance >= topDistance ? TOP : BOTTOM);
+      } else if (isPullUp && _this.direction === TOUCH_TOP && scrollTop >= _this.bottom && isPullUpStatus !== LOADING && !isPullDownStatus) {
+        event.preventDefault();
+        // event.stopPropagation();
+        _this.pullUpBarStartY = _this.pullUpBarStartY ? _this.pullUpBarStartY : e.touches[0].clientY;
+        distance = (moveY - _this.pullUpBarStartY) / _this.limit;
+        _this.translate(distance, false);
         _this.setState({
-          fillInAttr: null
+          isPullUpStatus: Math.abs(distance) >= bottomDistance ? BOTTOM : TOP
         });
+        console.log('开启上拉加载');
       }
     };
 
-    _this.setTarget = function () {
-      var _this$state = _this.state,
-          index = _this$state.index,
-          scrollX = _this$state.scrollX,
-          scrollY = _this$state.scrollY;
-
-      var els = _this.container.children;
-      if (scrollX) {
-        _this.view.scrollLeft = els[index].offsetLeft;
-      } else {
-        _this.view.scrollTop = els[index].offsetTop;
-      }
-      setTimeout(function () {
-        _this.view.addEventListener('scroll', _this.scroll);
-      }, 0);
-    };
-
-    _this.scroll = function () {
+    _this.handleTouchEnd = function (e) {
       var _this$state2 = _this.state,
-          onLower = _this$state2.onLower,
-          onUpper = _this$state2.onUpper,
-          onScroll = _this$state2.onScroll,
-          scrollY = _this$state2.scrollY,
-          scrollX = _this$state2.scrollX,
-          isPullDown = _this$state2.isPullDown,
-          isPullUp = _this$state2.isPullUp,
-          topDistance = _this$state2.topDistance,
-          bottomDistance = _this$state2.bottomDistance;
-      // 滚动时会触发的函数
+          isPullDownStatus = _this$state2.isPullDownStatus,
+          isPullUpStatus = _this$state2.isPullUpStatus,
+          topMethod = _this$state2.topMethod,
+          bottomMethod = _this$state2.bottomMethod,
+          animateTime = _this$state2.animateTime;
+      // 重置上拉, 下拉 开始的 Y 轴点
 
-      onScroll && onScroll();
-      var obj = {
-        // scrollx 和 scrolly 的值部分相同,不整合在一起,为了以后维护.
-        scrollX: {
-          top: isPullDown ? _this.pullDownBarAttr : 0,
-          lower: isPullUp ? _this.pullUpBar.offsetLeft - _this.viewAttr : _this.view.scrollWidth - _this.viewAttr,
-          now: _this.view.scrollLeft,
-          topLimit: isPullDown ? _this.pullDownBarAttr - topDistance : false,
-          bottomLimit: isPullUp ? _this.pullUpBar.offsetLeft - _this.viewAttr + bottomDistance : false,
-          onUpper: isPullDown ? _this.pullDown : onUpper && onUpper,
-          onLower: isPullUp ? _this.pullUp : onLower && onLower
+      _this.pullDownBarStartY = null;
+      _this.pullUpBarStartY = null;
+      console.log('触摸结束', isPullDownStatus, isPullUpStatus);
+      // OO 包裹,const 定义的常量  不可动, 如果动的话, 下面两个对象中 top, bottom 也需要改变
+      // 上拉 下拉 还是尽量独立出来  方便以后维护和更改
+      var pullDownFn = {
+        top: function top() {
+          _this.setState({
+            isPullDownStatus: LOADING
+          }, function () {
+            _this.translate(_this.pullDownBarHeight);
+            topMethod && _this.pullDown(topMethod);
+          });
         },
-        scrollY: {
-          top: isPullDown ? _this.pullDownBarAttr : 0,
-          lower: isPullUp ? _this.pullUpBar.offsetTop - _this.viewAttr : _this.view.scrollHeight - _this.viewAttr,
-          now: _this.view.scrollTop,
-          topLimit: isPullDown ? _this.pullDownBarAttr - topDistance : false,
-          bottomLimit: isPullUp ? _this.pullUpBar.offsetTop - _this.viewAttr + bottomDistance : false,
-          onUpper: isPullDown ? _this.pullDown : onUpper && onUpper,
-          onLower: isPullUp ? _this.pullUp : onLower && onLower
+        bottom: function bottom() {
+          _this.translate();
+          setTimeout(function () {
+            _this.setState({
+              isPullDownStatus: null
+            });
+          }, animateTime);
         }
       };
-      scrollX ? _this.scrollMethod(obj.scrollX) : _this.scrollMethod(obj.scrollY);
+      var pullUpFn = {
+        top: function top() {
+          _this.translate();
+          setTimeout(function () {
+            _this.setState({
+              isPullUpStatus: null
+            });
+          }, animateTime);
+        },
+        bottom: function bottom() {
+          _this.setState({
+            isPullUpStatus: LOADING
+          }, function () {
+            _this.translate(-_this.pullUpBarHeight);
+            bottomMethod && _this.pullUp(bottomMethod);
+          });
+        }
+      };
+      isPullDownStatus && pullDownFn[isPullDownStatus]();
+      isPullUpStatus && pullUpFn[isPullUpStatus]();
     };
 
-    _this.scrollMethod = function (obj) {
-      var top = obj.top,
-          lower = obj.lower,
-          now = obj.now,
-          onUpper = obj.onUpper,
-          onLower = obj.onLower,
-          topLimit = obj.topLimit,
-          bottomLimit = obj.bottomLimit;
+    _this.setTarget = function () {
       var _this$state3 = _this.state,
-          isLoading = _this$state3.isLoading,
-          isPullDown = _this$state3.isPullDown,
-          isPullUp = _this$state3.isPullUp;
-      // console.log(top, topLimit, now, lower, bottomLimit)
-      // 两种情况 如果用户开启了上拉加载 或者 下拉刷新的时候   ||  用户未开启上拉加载和下拉刷新的情况
+          itemIndex = _this$state3.itemIndex,
+          itemKey = _this$state3.itemKey,
+          scrollX = _this$state3.scrollX;
 
-      if (now <= (topLimit || top)) {
-        _this.kickBack = null;
-        onUpper();
-      } else if (now >= (bottomLimit || lower)) {
-        _this.kickBack = null;
-        onLower();
-      } else if (isPullDown && !isLoading && now > 0 && now < _this.pullDownBarAttr) {
-        _this.kickBack = _this.pullDownBarAttr;
-      } else if (isPullUp && !isLoading && now > lower && now < lower + _this.pullUpBarAttr) {
-        _this.kickBack = lower;
+      var children = _this.children.children;
+      var index = void 0;
+      // 检测下标 || key 值
+      if (itemIndex) {
+        index = itemIndex;
+      } else if (itemKey) {
+        for (var i = 0; i < _this.children.length; i++) {
+          console.log('key 值', _this.children[i].key);
+          if (itemKey === _this.children[i].key) {
+            index = i;
+            break;
+          }
+        }
       }
+      var dom = scrollX ? _this.children : _this.wrap;
+      if (index >= 0) {
+        if (scrollX) {
+          dom.scrollLeft = children[index].offsetLeft;
+        } else {
+          console.log(children[index]);
+          dom.scrollTop = children[index].offsetTop;
+        }
+      }
+      // 等同步任务 完成后再添加 监听事件, 否则写成同步任务会触发 this.scroll
+      setTimeout(function () {
+        dom.addEventListener('scroll', _this.scroll);
+      }, 0);
     };
 
-    _this.scrollEnd = function () {
-      console.log('触摸结束', _this.kickBack);
-      _this.kickBack && _this.animate(_this.kickBack);
+    _this.fill = function (once) {
+      var wrapHeight = _this.state.wrapHeight;
+
+      var itemHeight = parseFloat(window.getComputedStyle(_this.children).height);
+      _this.wrap.style.height = wrapHeight + 'px';
+      _this.setState({
+        fillAttr: itemHeight < wrapHeight ? wrapHeight - itemHeight : false
+      }, function () {
+        _this.scrollBottom();
+        // 如果实际子元素的高度小于 定义高度, 而使用者有需要定位到一个 item 的位置,这时候我们就需要在填充完盒子之后在设置滚动, 只对 scrollY有效
+        once && _this.setTarget();
+      });
     };
 
-    _this.animate = function (target) {
-      console.log('3.target', target, _this.timer);
-      clearInterval(_this.timer);
-      var scrollX = _this.state.scrollX;
+    _this.scroll = function () {
+      var _this$state4 = _this.state,
+          onLower = _this$state4.onLower,
+          onUpper = _this$state4.onUpper,
+          onScroll = _this$state4.onScroll,
+          scrollX = _this$state4.scrollX,
+          upperThreshold = _this$state4.upperThreshold,
+          lowerThreshold = _this$state4.lowerThreshold;
 
       var attr = scrollX ? 'scrollLeft' : 'scrollTop';
-      _this.timer = setInterval(function () {
-        var distance = target - _this.view[attr];
-        var step = distance / 5;
-        step = step > 0 ? Math.ceil(step) : Math.floor(step);
-        _this.view[attr] += step;
-        if (Math.abs(distance) <= Math.abs(step)) {
-          console.log('4.销毁程序');
-          clearInterval(_this.timer);
-          _this.kickBack = null;
-          _this.isFillIn(); // 只想在刷新成功时检测下是否显示 fillinbox
-          _this.setState({
-            isLoading: false
-          });
-        }
-      }, 10);
+      var dom = scrollX ? _this.children : _this.wrap;
+      var scrollValue = dom[attr];
+      var viewAttr = scrollX ? parseFloat(window.getComputedStyle(dom, null).width) : parseFloat(window.getComputedStyle(dom, null).height);
+      var scrollDistance = scrollX ? dom.scrollWidth - viewAttr : dom.scrollHeight - viewAttr;
+      // TODO: 实时滚动中 会不停触发的函数, 暂时只添加滚动距离, 查缺补漏
+      onScroll && onScroll({ scroll: scrollValue });
+      if (scrollValue <= upperThreshold) {
+        onUpper && onUpper();
+      } else if (scrollValue >= scrollDistance - lowerThreshold) {
+        onLower && onLower();
+      }
     };
 
     _this.pullDown = function () {
-      var isLoading = _this.state.isLoading;
-
-      if (isLoading) return;
-      console.log('1.下拉刷新');
-      _this.setState({
-        isLoading: true
-      }, _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var onUpper, res;
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(fn) {
+        var animateTime, res;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -196,5 +207,5 @@ while (1) {
               case 0:
-                onUpper = _this.props.onUpper;
+                animateTime = _this.state.animateTime;
                 _context.next = 3;
-                return onUpper();
+                return fn();
 
@@ -204,8 +215,17 @@ case 3:
 
-                console.log('2.res', res);
                 if (res) {
-                  _this.animate(_this.pullDownBarAttr);
+                  console.log('下拉刷新执行结束', res);
+                  // TODO: 点1!!! 埋个坑 当用户下拉刷新结束后 再次滚动界面,我设置 loading 也会随之滚动上去, 当数据更新完后,视图也更新完,我设置不回滚到 scrolltop
+                  // 但当用户停留在 loading 不滚动的时候  就给他来个 动效
+                  _this.wrap.scrollTop === 0 && _this.translate();
+                  setTimeout(function () {
+                    _this.setState({
+                      isPullDownStatus: null
+                    }, function () {
+                      return _this.fill();
+                    });
+                  }, animateTime);
                 }
 
-              case 6:
+              case 5:
               case 'end':
@@ -216,14 +236,12 @@ return _context.stop();
         }, _callee, _this2);
-      })));
-    };
+      }));
 
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
     _this.pullUp = function () {
-      var isLoading = _this.state.isLoading;
-
-      if (isLoading) return;
-      console.log('1.上拉加载');
-      _this.setState({
-        isLoading: true
-      }, _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var onLower, res;
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fn) {
+        var animateTime, res;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -233,5 +251,5 @@ while (1) {
               case 0:
-                onLower = _this.props.onLower;
+                animateTime = _this.state.animateTime;
                 _context2.next = 3;
-                return onLower();
+                return fn();
 
@@ -241,8 +259,15 @@ case 3:
 
-                console.log('2.res', res);
-                _this.setState({ isLoading: false }, function () {
-                  _this.isFillIn();
-                });
+                if (res) {
+                  console.log('上拉加载执行结束', res);
+                  _this.translate();
+                  setTimeout(function () {
+                    _this.setState({
+                      isPullUpStatus: null
+                    }, function () {
+                      _this.fill();
+                    });
+                  }, animateTime);
+                }
 
-              case 6:
+              case 5:
               case 'end':
@@ -253,21 +278,71 @@ return _context2.stop();
         }, _callee2, _this2);
-      })));
+      }));
+
+      return function (_x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    _this.translate = function () {
+      var distance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var transition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var _this$state5 = _this.state,
+          pullThreshold = _this$state5.pullThreshold,
+          animateTime = _this$state5.animateTime;
+
+      console.log('移动距离', distance, transition, _this.content.style.transform);
+      if (Math.abs(distance) > pullThreshold) return;
+      transition ? _this.content.style.transition = 'all ' + animateTime + 'ms ease' : _this.content.style.transition = 'none';
+      _this.content.style.transform = 'translate3d(0, ' + distance + 'px,0)';
     };
 
+    _this.animate = function (target, dom) {
+      var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : scrollTop;
+
+      clearInterval(_this.timer);
+      console.log('执行 animate');
+      _this.timer = setInterval(function () {
+        var step = (target - dom[direction]) / 5;
+        step = step > 0 ? Math.ceil(step) : Math.floor(step);
+        dom[direction] += step;
+        if (Math.abs(target - dom[direction]) <= Math.abs(step)) {
+          clearInterval(_this.timer);
+          dom[direction] = target;
+        }
+      }, 20);
+    };
+
+    _this.scrollBottom = function () {
+      var fillAttr = _this.state.fillAttr;
+
+      var scrollHeight = _this.children.scrollHeight;
+      var h = parseFloat(window.getComputedStyle(_this.wrap).height);
+      // fillAttr > 0 的时候页面是无法滚动的
+      _this.bottom = fillAttr ? 0 : scrollHeight - h;
+    };
+
+    _this.limit = 4; // touch移动的距离限制 每次移动 1 / limit
     _this.state = {
-      scrollX: props.scrollX || false, // 允许横向滚动 Boolean
-      scrollY: props.scrollY || false, // 允许纵向滚动 Boolean
-      upperThreshold: props.upperThreshold || 50, // 距离顶部/左边多远时, 触发 scrolltoupper 事件 Number
-      lowerThreshold: props.lowerThreshold || 50, // 距离底部/右边多远时, 触发scrolltolower 事件  Number
-      scrollTop: props.scrollTop || 0, // 设置竖向滚动条位置  Number
-      scrollLeft: props.scrollLeft || 0, // 设置横向滚动条位置  Number
-      scrollIntoView: props.scrollIntoView, // 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 Sting
-      onUpper: props.onUpper, // 滚动到顶部/左边, 会触发 scrolltoupper 事件 Function
-      onLower: props.onLower, // 滚动到底部/右边, 会触发 scrolltolower 事件 Function
-      onScroll: props.onScroll, // 滚动时触发  Function
-      index: props.index || 0, // 展示第几个内容, 默认第一个, 从零开始 Number
-      isPullDown: props.isPullDown || false, // 是否开启下拉刷新, 默认关闭
-      isPullUp: props.isPullUp || false, // 是否开启上拉加载, 默认关闭
-      topDistance: props.distance || 50, // 触发 onupper 的下拉距离阀值
-      bottomDistance: props.distance || 50 // 触发 onlower 的上拉距离阀值
+      isPullDown: props.isPullDown || false, // 是否开启下拉刷新, 默认为 false Boolean
+      isPullUp: props.isPullUp || true, // 是否开启上拉加载, 默认为 true Boolean
+      topDistance: props.topDistance || 50, // 下拉刷新 触发 阀值, 默认为 50px Number
+      bottomDistance: props.bottomDistance || 50, // 上拉加载 触发 阀值, 默认为 50px Number
+      isPullDownStatus: null, // 下拉刷新状态, 默认为 null String
+      isPullUpStatus: null, // 上拉加载状态, 默认为 null String
+      topMethod: props.topMethod, // 下拉刷新执行方法 必须为 promise
+      bottomMethod: props.bottomMethod, // 上拉加载执行方法 必须为 promise
+      wrapHeight: props.wrapHeight || window.screen.height, // 用户传进来的高度, 如果没有则自动撑满全屏, 不写在 style 中的原因是因为我在某些地方需要单独引用这个值,为了我计算方便
+      pullThreshold: props.pullThreshold || 200, // 上拉和下拉 最高可拉的阀值, 默认200  
+      scrollX: props.scrollX || false, // 允许横向滚动, 默认为 false Boolean
+      scrollY: props.scrollY || false, // 允许纵向滚动, 默认为 false Boolean
+      upperThreshold: props.upperThreshold || 50, // 距离顶部/左边多远时, 触发 onUpper 事件, 默认为 50px Number
+      lowerThreshold: props.lowerThreshold || 50, // 距离底部/右边多远时, 触发 onLower 事件, 默认为 50px  Number
+      // scrollTop: props.scrollTop || 0,                    // 设置竖向滚动条位置  Number
+      // scrollLeft: props.scrollLeft || 0,                  // 设置横向滚动条位置  Number
+      onUpper: props.onUpper, // 滚动到顶部/左边, 会触发 onUpper 事件 Function
+      onLower: props.onLower, // 滚动到底部/右边, 会触发 onLower 事件 Function
+      onScroll: props.onScroll, // 滚动实时触发  Function
+      itemIndex: props.itemIndex || false, // 展示第几个内容, 默认 false, 即默认展示, Number, 与 itemKey 只能存在一个
+      itemKey: props.itemKey || false, // 展示第几个内容, 默认 false, 即默认展示, String || Number, 与 itemIndex 只能存在一个
+      animateTime: props.animateTime || 300 // 设置缓动动画完成时间
     };
@@ -278,23 +353,30 @@ return _this;
   ScrollView.prototype.componentDidMount = function componentDidMount() {
-    this.setbasic();
-    this.view.addEventListener('touchend', this.scrollEnd);
+    if (this.state.scrollX) {
+      this.setTarget();
+    } else {
+      this.wrap.addEventListener('touchstart', this.handleTouchStart);
+      this.wrap.addEventListener('touchmove', this.handleTouchMove);
+      this.wrap.addEventListener('touchend', this.handleTouchEnd);
+      this.fill(true);
+    }
   };
 
   ScrollView.prototype.componentWillUnmount = function componentWillUnmount() {
-    this.view.removeEventListener('scroll', this.scroll);
-    this.view.removeEventListener('touchend', this.scrollEnd);
+    this.wrap.removeEventListener('touchstart', this.handleTouchStart);
+    this.wrap.removeEventListener('touchmove', this.handleTouchMove);
+    this.wrap.removeEventListener('touchend', this.handleTouchEnd);
+    var dom = this.state.scrollX ? this.children : this.wrap;
+    dom.removeEventListener('scroll', this.scroll);
+    clearInterval(this.timer);
   };
 
-  // 计算所有子元素的高度 || 宽度
+  // 设置初始目标位置
 
-  // 基础值设置
 
+  // 自动填充 scrollY 中缺失的部分
+  // 在scrollY 打开的情况下, 如果实际的子元素的总高度 小于 使用者定义的高度, 所以这时候我们就需要填充下盒子
 
-  // 当子元素的宽度 || 高度 足以撑开这个 scroll-view 的时候, 取消填充
 
-  // 设置初始目标位置
+  // 滚动触发函数
 
-  // 缓动动画
-
-
   // 下拉刷新
@@ -306,2 +388,22 @@
 
+  /**
+   *        实时 touch 移动
+   *
+   * @param {number} [distance=0]移动距离,默认为0
+   * @param {boolean} [transition=true]是否开启动画效果,默认开启
+   */
+
+
+  /**
+   *TODO: 暂留 这是为 点1 留下的解决方案,一个缓动动画效果
+   *
+   * @param {*} targe 需要滚动到的位置
+   * @param {*} dom dom, 需要滚动的目标 
+   * @param {*} direction  scrollTop || scrollLeft, 默认 scollTop
+   */
+
+
+  //  滚动到底部什么位置触发下拉加载
+
+
   ScrollView.prototype.render = function render() {
@@ -311,78 +413,74 @@ var _this3 = this;
     var _state = this.state,
+        isPullDownStatus = _state.isPullDownStatus,
+        isPullUpStatus = _state.isPullUpStatus,
+        fillAttr = _state.fillAttr,
         scrollX = _state.scrollX,
-        scrollY = _state.scrollY,
-        upperThreshold = _state.upperThreshold,
-        lowerThreshold = _state.lowerThreshold,
-        scrollTop = _state.scrollTop,
-        scrollLeft = _state.scrollLeft,
-        scrollIntoView = _state.scrollIntoView,
-        onUpper = _state.onUpper,
-        onLower = _state.onLower,
-        onScroll = _state.onScroll,
-        isLoading = _state.isLoading,
-        isPullDown = _state.isPullDown,
-        isPullUp = _state.isPullUp,
-        fillInAttr = _state.fillInAttr;
+        translate = _state.translate;
     var _props = this.props,
-        children = _props.children,
-        style = _props.style;
+        style = _props.style,
+        children = _props.children;
 
-    var attr = scrollX ? 'width' : 'height';
-    var fillInStyle = {
-      height: {
-        height: fillInAttr + 'px'
-      },
-      width: {
-        width: fillInAttr + 'px'
-      }
-    };
+
     return React.createElement(
       'div',
-      {
-        style: style,
-        className: 'scroll-view-root ' + (scrollX ? 'scroll-x' : 'scroll-y') + ' ',
-        ref: function ref(node) {
-          _this3.view = node;
-          node && (_this3.viewAttr = parseFloat(window.getComputedStyle(node, null)[attr]));
+      { className: 'load-more-root', style: style, ref: function ref(node) {
+          return _this3.wrap = node;
         } },
-      isPullDown && React.createElement(
-        'div',
-        {
-          className: 'pull-down ' + (scrollX ? 'scroll-x-item' : 'scroll-y-item') + ' ',
-          ref: function ref(node) {
-            _this3.pullDownBar = node;
-            node && (_this3.pullDownBarAttr = parseFloat(window.getComputedStyle(node, null)[attr]));
-          } },
-        isLoading ? '正在刷新' : '下拉刷新'
-      ),
       React.createElement(
         'div',
-        {
-          className: (scrollX ? 'scroll-x-item' : 'scroll-y-item') + ' ',
-          ref: function ref(node) {
-            return _this3.container = node;
+        { className: 'load-more-content', ref: function ref(node) {
+            return _this3.content = node;
           } },
-        children.map(function (item, index) {
-          return React.createElement(
+        !scrollX && isPullDownStatus && !isPullUpStatus && React.createElement(
+          'div',
+          { className: 'pull-down-bar', ref: function ref(node) {
+              node && (_this3.pullDownBarHeight = parseFloat(window.getComputedStyle(node).height));
+            } },
+          isPullDownStatus === LOADING ? React.createElement(
             'div',
-            {
-              key: index,
-              className: '' + (scrollX ? 'scroll-x-item' : 'scroll-y-item')
-            },
-            item
-          );
-        })
-      ),
-      fillInAttr && React.createElement('div', {
-        className: (scrollX ? 'scroll-x-item' : 'scroll-y-item') + ' ',
-        style: fillInStyle[attr] }),
-      isPullUp && React.createElement(
-        'div',
-        {
-          className: 'pull-up ' + (scrollX && 'scroll-x-item') + ' ' + (scrollY && 'scroll-y-item'),
-          ref: function ref(node) {
-            _this3.pullUpBar = node;
-            node && (_this3.pullUpBarAttr = parseFloat(window.getComputedStyle(node, null)[attr]));
-          } },
-        isLoading ? '正在加载' : '上拉加载'
+            null,
+            'loading'
+          ) : React.createElement(
+            'span',
+            { className: 'is-transition ' + (isPullDownStatus === TOP ? 'is-rotate' : '') },
+            '\u2193'
+          )
+        ),
+        React.createElement(
+          'div',
+          {
+            className: 'scroll-view-root ' + (scrollX ? 'scroll-view-x' : 'scroll-view-y') + ' ',
+            ref: function ref(node) {
+              _this3.children = node;
+            } },
+          children.map(function (item, index) {
+            return React.createElement(
+              'div',
+              {
+                key: 'children' + index,
+                className: '' + (scrollX ? 'scroll-x-item' : 'scroll-y-item')
+              },
+              item
+            );
+          })
+        ),
+        fillAttr && React.createElement('div', { style: { backgroundColor: 'yellow', height: fillAttr + 'px' } }),
+        !scrollX && isPullUpStatus && !isPullDownStatus && React.createElement(
+          'div',
+          { className: 'pull-up-bar', ref: function ref(node) {
+              if (node) {
+                _this3.pullUpBarHeight = parseFloat(window.getComputedStyle(node).height);
+              }
+            }
+          },
+          isPullUpStatus === LOADING ? React.createElement(
+            'div',
+            null,
+            'loading'
+          ) : React.createElement(
+            'span',
+            { className: 'is-transition ' + (isPullUpStatus === BOTTOM ? 'is-rotate' : '') + ' ' },
+            '\u2191'
+          )
+        )
       )
@@ -389,0 +487,0 @@ );

es/TabContainer/TabContainer.js

@@ -9,2 +9,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 import './TabContainer.css';
+import { SSL_OP_PKCS1_CHECK_1 } from 'constants';
 var LEFT = 'left';
@@ -16,5 +17,9 @@ var RIGHT = 'right';
 /*  接受参数: 
-      interval : 触发滚动间距  Number
-      index : 默认 展示第几页 Number
+      interval : 触发滚动间距  Number 默认为屏幕的1/5
+      index : 默认0 展示第几页 Number
       onSel: 回调函数  返回index  Function
+      onTranslate: 回调函数 配合 Navbar 做 bar 联动, 返回一个对象 {
+        distance:  Number // 移动距离
+        transition: Boolean // 是否开始 transition 动画
+      }
 */
@@ -52,7 +57,4 @@ /*
     _this.slideStart = function (e) {
-      console.log(e.changedTouches[0].pageX);
       _this.startX = e.changedTouches[0].pageX;
       _this.startY = e.changedTouches[0].pageY;
-      _this.container.scrollLeft = _this.index * _this.itemWidth;
-      // this.quiescingTouch()
     };
@@ -65,10 +67,11 @@
       var Y = moveEndY - _this.startY;
-
+      var distance = X - _this.itemWidth * _this.index;
       if (!_this.slideDirection || _this.slideDirection === RIGHT || _this.slideDirection === LEFT) {
         if (Math.abs(X) > Math.abs(Y) && X > 0) {
           // right
-          console.log('向右');
+          // event.preventDefault();
+          // event.stopPropagation();
+          console.log('右移');
           if (_this.index !== 0) {
-            var distance = _this.index * _this.itemWidth - X;
-            _this.container.scrollLeft = distance;
+            _this.translate(distance);
           }
@@ -78,6 +81,7 @@ _this.slideDirection = RIGHT;
           // left
-          console.log(' 向左');
+          // event.preventDefault();
+          // event.stopPropagation();
+          console.log('左移');
           if (_this.index !== _this.props.children.length - 1) {
-            var _distance = _this.index * _this.itemWidth - X;
-            _this.container.scrollLeft = _distance;
+            _this.translate(distance);
           }
@@ -87,10 +91,10 @@ _this.slideDirection = LEFT;
           // down
+          if (_this.slideDirection) return;
           _this.slideDirection = DOWN;
           console.log('向下');
-          _this.hideLi();
         } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
           // up 
+          if (_this.slideDirection) return;
           _this.slideDirection = TOP;
           console.log('向上');
-          _this.hideLi();
         }
@@ -101,10 +105,19 @@ }
     _this.slideEnd = function (e) {
-      _this.endX = e.changedTouches[0].clientX;
-      _this.checkTouch();
-      _this.slideDirection = null;
+      _this.endX = e.changedTouches[0].pageX;
+      _this.isTranslate();
     };
 
-    _this.checkTouch = function () {
+    _this.translate = function (distance, transition) {
+      var cssText = '\n        ' + (transition ? 'transition: all 200ms;' : '') + '\n        transform:translateX(' + distance + 'px)\n    ';
+      _this.container.style = cssText;
+      var onTranslate = _this.props.onTranslate;
+
+      onTranslate && onTranslate({ distance: distance, transition: transition });
+    };
+
+    _this.isTranslate = function () {
       if (_this.slideDirection === RIGHT || _this.slideDirection === LEFT) {
-        var distance = Math.abs(_this.endX - _this.startX);
+        var onSel = _this.props.onSel;
+
+        var distance = _this.endX - _this.startX;
         var obj = {
@@ -124,39 +137,15 @@ // 上一页
           // 滑动距离大于阀值  判断左右,跳转下一页 or 上一页
-        };if (distance >= _this.interval) {
+        };if (Math.abs(distance) >= _this.interval) {
           // 判断左右 跳转下一页
+          console.log('上下页切换', _this.index);
           obj[_this.slideDirection]();
+          onSel && onSel(_this.index);
         }
-        _this.animate();
-      } else {
-        _this.showLi();
-        _this.container.scrollLeft = _this.index * _this.itemWidth;
+        _this.translate(-_this.index * _this.itemWidth, true);
       }
+      _this.slideDirection = null;
     };
 
-    _this.animate = function () {
-      var onSel = _this.props.onSel;
-
-      var target = _this.itemWidth * _this.index;
-      console.log('目标的 scrollleft ==> ' + target, _this.timer);
-      _this.timer = setInterval(function () {
-        var step = (target - _this.container.scrollLeft) / 4;
-        // 使用地板,天花板函数的原因在于: step 的值 若为小数 无法触发
-        step = step > 0 ? Math.ceil(step) : Math.floor(step);
-        // console.log('正在进行中', step, this.container.scrollLeft)
-        _this.container.scrollLeft += step;
-        // 在一定限度内 结束 定时器,并将目标值赋予
-        if (Math.abs(target - _this.container.scrollLeft) <= Math.abs(step)) {
-          clearInterval(_this.timer);
-          _this.container.scrollLeft = target;
-          if (_this.oldIndex !== _this.index) {
-            onSel && onSel(_this.index);
-            _this.oldIndex = _this.index;
-          }
-          console.log('进入销毁程序', _this.timer, _this.container.scrollLeft, target);
-        }
-      }, 10);
-    };
-
     _this.itemWidth = window.screen.width;
-    _this.interval = props.interval || parseInt(_this.itemWidth / 4);
+    _this.interval = props.interval || parseInt(_this.itemWidth / 5);
     _this.index = props.index || 0;
@@ -167,60 +156,39 @@ _this.oldIndex = props.index || 0;
 
+  TabContainer.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    console.log('tabcontainer nextProps', nextProps);
+    var index = nextProps.index;
+
+    if (this.index !== index) {
+      this.index = index;
+      this.translate(-index * this.itemWidth, true);
+    }
+  };
+
   TabContainer.prototype.componentDidMount = function componentDidMount() {
-    this.container.scrollLeft = this.index * this.itemWidth;
-    this.container.addEventListener('touchstart', this.slideStart);
-    this.container.addEventListener('touchmove', this.slideMove);
-    this.container.addEventListener('touchend', this.slideEnd);
+    this.translate(-this.index * this.itemWidth);
+    this.root.addEventListener('touchstart', this.slideStart);
+    this.root.addEventListener('touchmove', this.slideMove);
+    this.root.addEventListener('touchend', this.slideEnd);
   };
 
   TabContainer.prototype.componentWillUnmount = function componentWillUnmount() {
-    this.container.removeEventListener('touchstart', this.slideStart);
-    this.container.removeEventListener('touchmove', this.slideMove);
-    this.container.removeEventListener('touchend', this.slideEnd);
-    clearInterval(this.timer);
+    this.root.removeEventListener('touchstart', this.slideStart);
+    this.root.removeEventListener('touchmove', this.slideMove);
+    this.root.removeEventListener('touchend', this.slideEnd);
   };
-  // 触摸开始
-
   // 移动中
 
-
   // 触摸结束
 
-  // 判断用户是查看上一页还是下一页, 并设置回弹效果
 
-  // 缓动动画, 由快到慢
+  /**
+   * 实时移动
+   *
+   * @param {*} distance 移动距离
+   * @param {*} transition 是否开启动画
+   */
 
+  // 判断用户是查看上一页还是下一页, 并设置回弹效果
 
-  // 针对 ios 侧边滑出做出的限制
-  // quiescingTouch() {
-  //   if (this.startX < 30) {
-  //     this.container.removeEventListener('touchmove', this.slideMove)
-  //     this.container.removeEventListener('touchend', this.slideEnd)
-  //     this.hideLi()
-  //     this.wrap.style.overflow = 'hidden'
-  //   } else {
-  //     this.showLi()
-  //     this.wrap.style.overflow = 'visible'
-  //     this.container.addEventListener('touchmove', this.slideMove)
-  //     this.container.addEventListener('touchend', this.slideEnd)
-  //   }
-  // }
-  // 隐藏 li
-  TabContainer.prototype.hideLi = function hideLi() {
-    var els = this.wrap.children;
-    for (var i = 0, len = els.length; i < len; i++) {
-      if (i !== this.index) {
-        els[i].style.display = 'none';
-      }
-    }
-  };
-  // 显示 li
 
-
-  TabContainer.prototype.showLi = function showLi() {
-    var els = this.wrap.children;
-    for (var i = 0, len = els.length; i < len; i++) {
-      els[i].style.display = 'inline-block';
-    }
-  };
-
   TabContainer.prototype.render = function render() {
@@ -232,3 +200,3 @@ var _this2 = this;
       { className: 'tab-container-root', ref: function ref(node) {
-          _this2.container = node;
+          _this2.root = node;
         } },
@@ -238,3 +206,3 @@ React.createElement(
         { className: 'tab-container', ref: function ref(node) {
-            _this2.wrap = node;
+            _this2.container = node;
           } },
@@ -241,0 +209,0 @@ this.props.children

lib/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.TabContainerItem = exports.TabContainer = exports.NavBar = undefined;
+exports.LozyLoad = exports.ScrollView = exports.TabContainerItem = exports.TabContainer = exports.NavBar = undefined;
 
@@ -18,2 +18,10 @@ var _NavBar2 = require('./NavBar/NavBar');
 
+var _ScrollView2 = require('./ScrollView/ScrollView.js');
+
+var _ScrollView3 = _interopRequireDefault(_ScrollView2);
+
+var _LazyLoad = require('./LazyLoad//LazyLoad.js');
+
+var _LazyLoad2 = _interopRequireDefault(_LazyLoad);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,2 +31,4 @@
 exports.TabContainer = _TabContainer3.default;
-exports.TabContainerItem = _TabContainerItem3.default;
+exports.TabContainerItem = _TabContainerItem3.default;
+exports.ScrollView = _ScrollView3.default;
+exports.LozyLoad = _LazyLoad2.default;

lib/NavBar/NavBar.js

@@ -21,3 +21,4 @@ 'use strict';
     1. bar 中无其他样式,bar 点击后 bar 的图标无变化,只是颜色字体变化
-    2. bar 中有其他样式, bar点击后 bar 的图标和颜色发生变化,所以需要有个 NavItem来配合
+
+   TODO: 2. bar 中有其他样式, bar点击后 bar 的图标和颜色发生变化,所以需要有个 NavItem来配合
 */
@@ -33,5 +34,6 @@ /* 定义:
 
-    TODO: 功能点==> 当 NavBar 与 TabContainer 搭配使用时, TabContainer 滑动, Nav的 Bar 也随着同步移动
+    TODO: 完成!!!!!
+       功能点==> 当 NavBar 与 TabContainer 搭配使用时, TabContainer 滑动, Nav的 Bar 也随着同步移动
     translate: 通过 TabContianer 回调传过来的 移动值
-      实际的值应该根据 NavBar 的 length 来算, translate = translate / length, 应当为 1: length
+      实际的值应该根据 NavBar 的 length 来算, translate = translate / length, 应当为 1: length 
       
@@ -47,3 +49,22 @@ */
 
+    _this.translateBar = function (s) {
+      var _this$props = _this.props,
+          NavData = _this$props.NavData,
+          children = _this$props.children;
+
+      var length = NavData ? NavData.length : children.length;
+      // console.log('ssss', s)
+      var distance = s.distance,
+          transition = s.transition;
+
+      if (_this.bar) {
+        // 不连写的原因是 防止以后添加其他属性 会覆盖
+        transition ? _this.bar.style.transition = 'all 200ms' : _this.bar.style.transition = 'none';
+        _this.bar.style.transform = 'translateX(' + -distance / length + 'px)';
+      }
+    };
+
     _this.sel = function (item, index) {
+      // 防止出现不需要 bar 的情况
+      _this.bar && (_this.bar.style.transition = 'all 200ms');
       var ind = _this.state.ind;
@@ -55,9 +76,8 @@ // 函数节流
 
+      onSel && onSel(item, index);
       _this.setState({ ind: index });
-      onSel && onSel(item, index);
     };
 
     _this.state = {
-      ind: props.ind || 0,
-      translate: props.translateX
+      ind: props.index || 0
     };
@@ -67,2 +87,15 @@ return _this;
 
+  NavBar.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    // console.log('Nav_nextProps', nextProps)
+    var index = nextProps.index,
+        translate = nextProps.translate;
+    var ind = this.state.ind;
+
+    if (index >= 0 && index !== ind) {
+      this.setState({ ind: index });
+    } else {
+      translate && this.translateBar(translate);
+    }
+  };
+
   NavBar.prototype.render = function render() {
@@ -73,13 +106,16 @@ var _this2 = this;
         ind = _state.ind,
-        translate = _state.translate;
+        translate = _state.translate,
+        newInd = _state.newInd;
     var _props = this.props,
         NavData = _props.NavData,
-        children = _props.children;
+        children = _props.children,
+        style = _props.style;
 
-    var itemWidth = NavData ? 100 / NavData.length : 100 / children.length;
-    // 同步移动
-    this.bar && (this.bar.style.transform = 'translateX(' + translate + 'px)');
+    var itemWidth = NavData ? window.screen.width / NavData.length : window.screen.width / children.length;
+    // console.log('ind', ind)
     return _react2.default.createElement(
       'div',
-      { className: 'NavBar-root' },
+      { style: style, className: 'NavBar-root', ref: function ref(node) {
+          _this2.container = node;
+        } },
       NavData ? NavData.map(function (item, index) {
@@ -90,3 +126,3 @@ return _react2.default.createElement(
             key: 'Nav' + index,
-            style: { width: itemWidth + '%' },
+            style: { width: itemWidth + 'px' },
             className: 'Nav-item',
@@ -103,3 +139,3 @@ onClick: function onClick() {
             key: 'Nav' + index,
-            style: { width: itemWidth + '%' },
+            style: { width: itemWidth + 'px' },
             className: 'Nav-item',
@@ -112,3 +148,3 @@ onClick: function onClick() {
       }),
-      _react2.default.createElement('div', { className: 'Nav-active', style: { width: itemWidth + '%', left: ind * itemWidth + '%' }, ref: function ref(node) {
+      _react2.default.createElement('div', { className: 'Nav-active', style: { width: itemWidth + 'px', transform: 'translatex(' + ind * itemWidth + 'px)' }, ref: function ref(node) {
           return _this2.bar = node;
@@ -115,0 +151,0 @@ } })

lib/ScrollView/ScrollView.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _util = require('util');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,7 +26,9 @@
 
-/* 
-    实现一个小程序的 scrollview
-    TIP: 使用竖向滚动时 必须给予 scrollview 一个高度
-        如果横向也需要上拉加载,下拉刷新的话 也必须传递一个宽度
-*/
+var TOP = 'top';
+var BOTTOM = 'bottom';
+var LOADING = 'loading';
+
+var TOUCH_TOP = 'touch_top';
+var TOUCH_BOTTOM = 'touch_bottom';
+
 var ScrollView = function (_Component) {
@@ -44,161 +44,173 @@ _inherits(ScrollView, _Component);
 
-    _this.getChildrenAttr = function () {
-      var scrollX = _this.state.scrollX;
-
-      var children = _this.container.children;
-      var res = 0;
-      var attr = scrollX ? 'width' : 'height';
-      for (var i = 0; i < children.length; i++) {
-        res += parseFloat(window.getComputedStyle(children[i], null)[attr]);
-      }
-      return res;
+    _this.handleTouchStart = function (e) {
+      console.log('触摸开始', _this.wrap.scrollTop);
+      _this.startY = e.touches[0].clientY;
     };
 
-    _this.setbasic = function () {
-      var scrollX = _this.state.scrollX;
+    _this.handleTouchMove = function (e) {
+      var _this$state = _this.state,
+          isPullDown = _this$state.isPullDown,
+          isPullUp = _this$state.isPullUp,
+          topDistance = _this$state.topDistance,
+          bottomDistance = _this$state.bottomDistance,
+          isPullDownStatus = _this$state.isPullDownStatus,
+          isPullUpStatus = _this$state.isPullUpStatus;
 
-      var fillInAttr = void 0;
-      var childrenAttr = _this.getChildrenAttr();
-      console.log('childrenAttr', childrenAttr, _this.pullDownBarAttr, _this.pullUpBarAttr);
-      if (childrenAttr < _this.viewAttr) {
-        // scroll高度 - 子元素高度 + 两个 bar 的高度 || 宽度
-        var pullDownBarAttr = _this.pullDownBarAttr ? _this.pullDownBarAttr : 0;
-        var pullUpBarAttr = _this.pullUpBarAttr ? _this.pullUpBarAttr : 0;
-        fillInAttr = _this.viewAttr - childrenAttr;
-        _this.setState({ fillInAttr: fillInAttr }, function () {
-          return _this.setTarget();
+      var scrollTop = _this.wrap.scrollTop;
+      var moveY = e.touches[0].clientY;
+      var distance = void 0;
+      _this.direction = moveY - _this.startY > 0 ? TOUCH_BOTTOM : TOUCH_TOP;
+      console.log('滚动距离==>' + scrollTop, '上拉加载距离==>' + _this.bottom);
+      if (isPullDown && _this.direction === TOUCH_BOTTOM && scrollTop === 0 && isPullDownStatus !== LOADING && !isPullUpStatus) {
+        event.preventDefault();
+        // event.stopPropagation();
+        _this.pullDownBarStartY = _this.pullDownBarStartY ? _this.pullDownBarStartY : e.touches[0].clientY;
+        distance = (moveY - _this.pullDownBarStartY) / _this.limit;
+        _this.translate(distance, false);
+        _this.setState({
+          isPullDownStatus: distance >= topDistance ? TOP : BOTTOM
         });
-      }
-      console.log(fillInAttr);
-      !fillInAttr && _this.setTarget();
-    };
-
-    _this.isFillIn = function () {
-      if (_this.getChildrenAttr() >= _this.viewAttr) {
+        console.log('开启下拉刷新', distance, distance >= topDistance ? TOP : BOTTOM);
+      } else if (isPullUp && _this.direction === TOUCH_TOP && scrollTop >= _this.bottom && isPullUpStatus !== LOADING && !isPullDownStatus) {
+        event.preventDefault();
+        // event.stopPropagation();
+        _this.pullUpBarStartY = _this.pullUpBarStartY ? _this.pullUpBarStartY : e.touches[0].clientY;
+        distance = (moveY - _this.pullUpBarStartY) / _this.limit;
+        _this.translate(distance, false);
         _this.setState({
-          fillInAttr: null
+          isPullUpStatus: Math.abs(distance) >= bottomDistance ? BOTTOM : TOP
         });
+        console.log('开启上拉加载');
       }
     };
 
-    _this.setTarget = function () {
-      var _this$state = _this.state,
-          index = _this$state.index,
-          scrollX = _this$state.scrollX,
-          scrollY = _this$state.scrollY;
-
-      var els = _this.container.children;
-      if (scrollX) {
-        _this.view.scrollLeft = els[index].offsetLeft;
-      } else {
-        _this.view.scrollTop = els[index].offsetTop;
-      }
-      setTimeout(function () {
-        _this.view.addEventListener('scroll', _this.scroll);
-      }, 0);
-    };
-
-    _this.scroll = function () {
+    _this.handleTouchEnd = function (e) {
       var _this$state2 = _this.state,
-          onLower = _this$state2.onLower,
-          onUpper = _this$state2.onUpper,
-          onScroll = _this$state2.onScroll,
-          scrollY = _this$state2.scrollY,
-          scrollX = _this$state2.scrollX,
-          isPullDown = _this$state2.isPullDown,
-          isPullUp = _this$state2.isPullUp,
-          topDistance = _this$state2.topDistance,
-          bottomDistance = _this$state2.bottomDistance;
-      // 滚动时会触发的函数
+          isPullDownStatus = _this$state2.isPullDownStatus,
+          isPullUpStatus = _this$state2.isPullUpStatus,
+          topMethod = _this$state2.topMethod,
+          bottomMethod = _this$state2.bottomMethod,
+          animateTime = _this$state2.animateTime;
+      // 重置上拉, 下拉 开始的 Y 轴点
 
-      onScroll && onScroll();
-      var obj = {
-        // scrollx 和 scrolly 的值部分相同,不整合在一起,为了以后维护.
-        scrollX: {
-          top: isPullDown ? _this.pullDownBarAttr : 0,
-          lower: isPullUp ? _this.pullUpBar.offsetLeft - _this.viewAttr : _this.view.scrollWidth - _this.viewAttr,
-          now: _this.view.scrollLeft,
-          topLimit: isPullDown ? _this.pullDownBarAttr - topDistance : false,
-          bottomLimit: isPullUp ? _this.pullUpBar.offsetLeft - _this.viewAttr + bottomDistance : false,
-          onUpper: isPullDown ? _this.pullDown : onUpper && onUpper,
-          onLower: isPullUp ? _this.pullUp : onLower && onLower
+      _this.pullDownBarStartY = null;
+      _this.pullUpBarStartY = null;
+      console.log('触摸结束', isPullDownStatus, isPullUpStatus);
+      // OO 包裹,const 定义的常量  不可动, 如果动的话, 下面两个对象中 top, bottom 也需要改变
+      // 上拉 下拉 还是尽量独立出来  方便以后维护和更改
+      var pullDownFn = {
+        top: function top() {
+          _this.setState({
+            isPullDownStatus: LOADING
+          }, function () {
+            _this.translate(_this.pullDownBarHeight);
+            topMethod && _this.pullDown(topMethod);
+          });
         },
-        scrollY: {
-          top: isPullDown ? _this.pullDownBarAttr : 0,
-          lower: isPullUp ? _this.pullUpBar.offsetTop - _this.viewAttr : _this.view.scrollHeight - _this.viewAttr,
-          now: _this.view.scrollTop,
-          topLimit: isPullDown ? _this.pullDownBarAttr - topDistance : false,
-          bottomLimit: isPullUp ? _this.pullUpBar.offsetTop - _this.viewAttr + bottomDistance : false,
-          onUpper: isPullDown ? _this.pullDown : onUpper && onUpper,
-          onLower: isPullUp ? _this.pullUp : onLower && onLower
+        bottom: function bottom() {
+          _this.translate();
+          setTimeout(function () {
+            _this.setState({
+              isPullDownStatus: null
+            });
+          }, animateTime);
         }
       };
-      scrollX ? _this.scrollMethod(obj.scrollX) : _this.scrollMethod(obj.scrollY);
+      var pullUpFn = {
+        top: function top() {
+          _this.translate();
+          setTimeout(function () {
+            _this.setState({
+              isPullUpStatus: null
+            });
+          }, animateTime);
+        },
+        bottom: function bottom() {
+          _this.setState({
+            isPullUpStatus: LOADING
+          }, function () {
+            _this.translate(-_this.pullUpBarHeight);
+            bottomMethod && _this.pullUp(bottomMethod);
+          });
+        }
+      };
+      isPullDownStatus && pullDownFn[isPullDownStatus]();
+      isPullUpStatus && pullUpFn[isPullUpStatus]();
     };
 
-    _this.scrollMethod = function (obj) {
-      var top = obj.top,
-          lower = obj.lower,
-          now = obj.now,
-          onUpper = obj.onUpper,
-          onLower = obj.onLower,
-          topLimit = obj.topLimit,
-          bottomLimit = obj.bottomLimit;
+    _this.setTarget = function () {
       var _this$state3 = _this.state,
-          isLoading = _this$state3.isLoading,
-          isPullDown = _this$state3.isPullDown,
-          isPullUp = _this$state3.isPullUp;
-      // console.log(top, topLimit, now, lower, bottomLimit)
-      // 两种情况 如果用户开启了上拉加载 或者 下拉刷新的时候   ||  用户未开启上拉加载和下拉刷新的情况
+          itemIndex = _this$state3.itemIndex,
+          itemKey = _this$state3.itemKey,
+          scrollX = _this$state3.scrollX;
 
-      if (now <= (topLimit || top)) {
-        _this.kickBack = null;
-        onUpper();
-      } else if (now >= (bottomLimit || lower)) {
-        _this.kickBack = null;
-        onLower();
-      } else if (isPullDown && !isLoading && now > 0 && now < _this.pullDownBarAttr) {
-        _this.kickBack = _this.pullDownBarAttr;
-      } else if (isPullUp && !isLoading && now > lower && now < lower + _this.pullUpBarAttr) {
-        _this.kickBack = lower;
+      var children = _this.children.children;
+      var index = void 0;
+      // 检测下标 || key 值
+      if (itemIndex) {
+        index = itemIndex;
+      } else if (itemKey) {
+        for (var i = 0; i < _this.children.length; i++) {
+          console.log('key 值', _this.children[i].key);
+          if (itemKey === _this.children[i].key) {
+            index = i;
+            break;
+          }
+        }
       }
+      var dom = scrollX ? _this.children : _this.wrap;
+      if (index >= 0) {
+        if (scrollX) {
+          dom.scrollLeft = children[index].offsetLeft;
+        } else {
+          console.log(children[index]);
+          dom.scrollTop = children[index].offsetTop;
+        }
+      }
+      // 等同步任务 完成后再添加 监听事件, 否则写成同步任务会触发 this.scroll
+      setTimeout(function () {
+        dom.addEventListener('scroll', _this.scroll);
+      }, 0);
     };
 
-    _this.scrollEnd = function () {
-      console.log('触摸结束', _this.kickBack);
-      _this.kickBack && _this.animate(_this.kickBack);
+    _this.fill = function (once) {
+      var wrapHeight = _this.state.wrapHeight;
+
+      var itemHeight = parseFloat(window.getComputedStyle(_this.children).height);
+      _this.wrap.style.height = wrapHeight + 'px';
+      _this.setState({
+        fillAttr: itemHeight < wrapHeight ? wrapHeight - itemHeight : false
+      }, function () {
+        _this.scrollBottom();
+        // 如果实际子元素的高度小于 定义高度, 而使用者有需要定位到一个 item 的位置,这时候我们就需要在填充完盒子之后在设置滚动, 只对 scrollY有效
+        once && _this.setTarget();
+      });
     };
 
-    _this.animate = function (target) {
-      console.log('3.target', target, _this.timer);
-      clearInterval(_this.timer);
-      var scrollX = _this.state.scrollX;
+    _this.scroll = function () {
+      var _this$state4 = _this.state,
+          onLower = _this$state4.onLower,
+          onUpper = _this$state4.onUpper,
+          onScroll = _this$state4.onScroll,
+          scrollX = _this$state4.scrollX,
+          upperThreshold = _this$state4.upperThreshold,
+          lowerThreshold = _this$state4.lowerThreshold;
 
       var attr = scrollX ? 'scrollLeft' : 'scrollTop';
-      _this.timer = setInterval(function () {
-        var distance = target - _this.view[attr];
-        var step = distance / 5;
-        step = step > 0 ? Math.ceil(step) : Math.floor(step);
-        _this.view[attr] += step;
-        if (Math.abs(distance) <= Math.abs(step)) {
-          console.log('4.销毁程序');
-          clearInterval(_this.timer);
-          _this.kickBack = null;
-          _this.isFillIn(); // 只想在刷新成功时检测下是否显示 fillinbox
-          _this.setState({
-            isLoading: false
-          });
-        }
-      }, 10);
+      var dom = scrollX ? _this.children : _this.wrap;
+      var scrollValue = dom[attr];
+      var viewAttr = scrollX ? parseFloat(window.getComputedStyle(dom, null).width) : parseFloat(window.getComputedStyle(dom, null).height);
+      var scrollDistance = scrollX ? dom.scrollWidth - viewAttr : dom.scrollHeight - viewAttr;
+      // TODO: 实时滚动中 会不停触发的函数, 暂时只添加滚动距离, 查缺补漏
+      onScroll && onScroll({ scroll: scrollValue });
+      if (scrollValue <= upperThreshold) {
+        onUpper && onUpper();
+      } else if (scrollValue >= scrollDistance - lowerThreshold) {
+        onLower && onLower();
+      }
     };
 
     _this.pullDown = function () {
-      var isLoading = _this.state.isLoading;
-
-      if (isLoading) return;
-      console.log('1.下拉刷新');
-      _this.setState({
-        isLoading: true
-      }, _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
-        var onUpper, res;
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee(fn) {
+        var animateTime, res;
         return _regenerator2.default.wrap(function _callee$(_context) {
@@ -208,5 +220,5 @@ while (1) {
               case 0:
-                onUpper = _this.props.onUpper;
+                animateTime = _this.state.animateTime;
                 _context.next = 3;
-                return onUpper();
+                return fn();
 
@@ -216,8 +228,17 @@ case 3:
 
-                console.log('2.res', res);
                 if (res) {
-                  _this.animate(_this.pullDownBarAttr);
+                  console.log('下拉刷新执行结束', res);
+                  // TODO: 点1!!! 埋个坑 当用户下拉刷新结束后 再次滚动界面,我设置 loading 也会随之滚动上去, 当数据更新完后,视图也更新完,我设置不回滚到 scrolltop
+                  // 但当用户停留在 loading 不滚动的时候  就给他来个 动效
+                  _this.wrap.scrollTop === 0 && _this.translate();
+                  setTimeout(function () {
+                    _this.setState({
+                      isPullDownStatus: null
+                    }, function () {
+                      return _this.fill();
+                    });
+                  }, animateTime);
                 }
 
-              case 6:
+              case 5:
               case 'end':
@@ -228,14 +249,12 @@ return _context.stop();
         }, _callee, _this2);
-      })));
-    };
+      }));
 
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
     _this.pullUp = function () {
-      var isLoading = _this.state.isLoading;
-
-      if (isLoading) return;
-      console.log('1.上拉加载');
-      _this.setState({
-        isLoading: true
-      }, _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee2() {
-        var onLower, res;
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee2(fn) {
+        var animateTime, res;
         return _regenerator2.default.wrap(function _callee2$(_context2) {
@@ -245,5 +264,5 @@ while (1) {
               case 0:
-                onLower = _this.props.onLower;
+                animateTime = _this.state.animateTime;
                 _context2.next = 3;
-                return onLower();
+                return fn();
 
@@ -253,8 +272,15 @@ case 3:
 
-                console.log('2.res', res);
-                _this.setState({ isLoading: false }, function () {
-                  _this.isFillIn();
-                });
+                if (res) {
+                  console.log('上拉加载执行结束', res);
+                  _this.translate();
+                  setTimeout(function () {
+                    _this.setState({
+                      isPullUpStatus: null
+                    }, function () {
+                      _this.fill();
+                    });
+                  }, animateTime);
+                }
 
-              case 6:
+              case 5:
               case 'end':
@@ -265,21 +291,71 @@ return _context2.stop();
         }, _callee2, _this2);
-      })));
+      }));
+
+      return function (_x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    _this.translate = function () {
+      var distance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var transition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var _this$state5 = _this.state,
+          pullThreshold = _this$state5.pullThreshold,
+          animateTime = _this$state5.animateTime;
+
+      console.log('移动距离', distance, transition, _this.content.style.transform);
+      if (Math.abs(distance) > pullThreshold) return;
+      transition ? _this.content.style.transition = 'all ' + animateTime + 'ms ease' : _this.content.style.transition = 'none';
+      _this.content.style.transform = 'translate3d(0, ' + distance + 'px,0)';
     };
 
+    _this.animate = function (target, dom) {
+      var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : scrollTop;
+
+      clearInterval(_this.timer);
+      console.log('执行 animate');
+      _this.timer = setInterval(function () {
+        var step = (target - dom[direction]) / 5;
+        step = step > 0 ? Math.ceil(step) : Math.floor(step);
+        dom[direction] += step;
+        if (Math.abs(target - dom[direction]) <= Math.abs(step)) {
+          clearInterval(_this.timer);
+          dom[direction] = target;
+        }
+      }, 20);
+    };
+
+    _this.scrollBottom = function () {
+      var fillAttr = _this.state.fillAttr;
+
+      var scrollHeight = _this.children.scrollHeight;
+      var h = parseFloat(window.getComputedStyle(_this.wrap).height);
+      // fillAttr > 0 的时候页面是无法滚动的
+      _this.bottom = fillAttr ? 0 : scrollHeight - h;
+    };
+
+    _this.limit = 4; // touch移动的距离限制 每次移动 1 / limit
     _this.state = {
-      scrollX: props.scrollX || false, // 允许横向滚动 Boolean
-      scrollY: props.scrollY || false, // 允许纵向滚动 Boolean
-      upperThreshold: props.upperThreshold || 50, // 距离顶部/左边多远时, 触发 scrolltoupper 事件 Number
-      lowerThreshold: props.lowerThreshold || 50, // 距离底部/右边多远时, 触发scrolltolower 事件  Number
-      scrollTop: props.scrollTop || 0, // 设置竖向滚动条位置  Number
-      scrollLeft: props.scrollLeft || 0, // 设置横向滚动条位置  Number
-      scrollIntoView: props.scrollIntoView, // 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 Sting
-      onUpper: props.onUpper, // 滚动到顶部/左边, 会触发 scrolltoupper 事件 Function
-      onLower: props.onLower, // 滚动到底部/右边, 会触发 scrolltolower 事件 Function
-      onScroll: props.onScroll, // 滚动时触发  Function
-      index: props.index || 0, // 展示第几个内容, 默认第一个, 从零开始 Number
-      isPullDown: props.isPullDown || false, // 是否开启下拉刷新, 默认关闭
-      isPullUp: props.isPullUp || false, // 是否开启上拉加载, 默认关闭
-      topDistance: props.distance || 50, // 触发 onupper 的下拉距离阀值
-      bottomDistance: props.distance || 50 // 触发 onlower 的上拉距离阀值
+      isPullDown: props.isPullDown || false, // 是否开启下拉刷新, 默认为 false Boolean
+      isPullUp: props.isPullUp || true, // 是否开启上拉加载, 默认为 true Boolean
+      topDistance: props.topDistance || 50, // 下拉刷新 触发 阀值, 默认为 50px Number
+      bottomDistance: props.bottomDistance || 50, // 上拉加载 触发 阀值, 默认为 50px Number
+      isPullDownStatus: null, // 下拉刷新状态, 默认为 null String
+      isPullUpStatus: null, // 上拉加载状态, 默认为 null String
+      topMethod: props.topMethod, // 下拉刷新执行方法 必须为 promise
+      bottomMethod: props.bottomMethod, // 上拉加载执行方法 必须为 promise
+      wrapHeight: props.wrapHeight || window.screen.height, // 用户传进来的高度, 如果没有则自动撑满全屏, 不写在 style 中的原因是因为我在某些地方需要单独引用这个值,为了我计算方便
+      pullThreshold: props.pullThreshold || 200, // 上拉和下拉 最高可拉的阀值, 默认200  
+      scrollX: props.scrollX || false, // 允许横向滚动, 默认为 false Boolean
+      scrollY: props.scrollY || false, // 允许纵向滚动, 默认为 false Boolean
+      upperThreshold: props.upperThreshold || 50, // 距离顶部/左边多远时, 触发 onUpper 事件, 默认为 50px Number
+      lowerThreshold: props.lowerThreshold || 50, // 距离底部/右边多远时, 触发 onLower 事件, 默认为 50px  Number
+      // scrollTop: props.scrollTop || 0,                    // 设置竖向滚动条位置  Number
+      // scrollLeft: props.scrollLeft || 0,                  // 设置横向滚动条位置  Number
+      onUpper: props.onUpper, // 滚动到顶部/左边, 会触发 onUpper 事件 Function
+      onLower: props.onLower, // 滚动到底部/右边, 会触发 onLower 事件 Function
+      onScroll: props.onScroll, // 滚动实时触发  Function
+      itemIndex: props.itemIndex || false, // 展示第几个内容, 默认 false, 即默认展示, Number, 与 itemKey 只能存在一个
+      itemKey: props.itemKey || false, // 展示第几个内容, 默认 false, 即默认展示, String || Number, 与 itemIndex 只能存在一个
+      animateTime: props.animateTime || 300 // 设置缓动动画完成时间
     };
@@ -290,23 +366,30 @@ return _this;
   ScrollView.prototype.componentDidMount = function componentDidMount() {
-    this.setbasic();
-    this.view.addEventListener('touchend', this.scrollEnd);
+    if (this.state.scrollX) {
+      this.setTarget();
+    } else {
+      this.wrap.addEventListener('touchstart', this.handleTouchStart);
+      this.wrap.addEventListener('touchmove', this.handleTouchMove);
+      this.wrap.addEventListener('touchend', this.handleTouchEnd);
+      this.fill(true);
+    }
   };
 
   ScrollView.prototype.componentWillUnmount = function componentWillUnmount() {
-    this.view.removeEventListener('scroll', this.scroll);
-    this.view.removeEventListener('touchend', this.scrollEnd);
+    this.wrap.removeEventListener('touchstart', this.handleTouchStart);
+    this.wrap.removeEventListener('touchmove', this.handleTouchMove);
+    this.wrap.removeEventListener('touchend', this.handleTouchEnd);
+    var dom = this.state.scrollX ? this.children : this.wrap;
+    dom.removeEventListener('scroll', this.scroll);
+    clearInterval(this.timer);
   };
 
-  // 计算所有子元素的高度 || 宽度
+  // 设置初始目标位置
 
-  // 基础值设置
 
+  // 自动填充 scrollY 中缺失的部分
+  // 在scrollY 打开的情况下, 如果实际的子元素的总高度 小于 使用者定义的高度, 所以这时候我们就需要填充下盒子
 
-  // 当子元素的宽度 || 高度 足以撑开这个 scroll-view 的时候, 取消填充
 
-  // 设置初始目标位置
+  // 滚动触发函数
 
-  // 缓动动画
-
-
   // 下拉刷新
@@ -318,2 +401,22 @@
 
+  /**
+   *        实时 touch 移动
+   *
+   * @param {number} [distance=0]移动距离,默认为0
+   * @param {boolean} [transition=true]是否开启动画效果,默认开启
+   */
+
+
+  /**
+   *TODO: 暂留 这是为 点1 留下的解决方案,一个缓动动画效果
+   *
+   * @param {*} targe 需要滚动到的位置
+   * @param {*} dom dom, 需要滚动的目标 
+   * @param {*} direction  scrollTop || scrollLeft, 默认 scollTop
+   */
+
+
+  //  滚动到底部什么位置触发下拉加载
+
+
   ScrollView.prototype.render = function render() {
@@ -323,78 +426,74 @@ var _this3 = this;
     var _state = this.state,
+        isPullDownStatus = _state.isPullDownStatus,
+        isPullUpStatus = _state.isPullUpStatus,
+        fillAttr = _state.fillAttr,
         scrollX = _state.scrollX,
-        scrollY = _state.scrollY,
-        upperThreshold = _state.upperThreshold,
-        lowerThreshold = _state.lowerThreshold,
-        scrollTop = _state.scrollTop,
-        scrollLeft = _state.scrollLeft,
-        scrollIntoView = _state.scrollIntoView,
-        onUpper = _state.onUpper,
-        onLower = _state.onLower,
-        onScroll = _state.onScroll,
-        isLoading = _state.isLoading,
-        isPullDown = _state.isPullDown,
-        isPullUp = _state.isPullUp,
-        fillInAttr = _state.fillInAttr;
+        translate = _state.translate;
     var _props = this.props,
-        children = _props.children,
-        style = _props.style;
+        style = _props.style,
+        children = _props.children;
 
-    var attr = scrollX ? 'width' : 'height';
-    var fillInStyle = {
-      height: {
-        height: fillInAttr + 'px'
-      },
-      width: {
-        width: fillInAttr + 'px'
-      }
-    };
+
     return _react2.default.createElement(
       'div',
-      {
-        style: style,
-        className: 'scroll-view-root ' + (scrollX ? 'scroll-x' : 'scroll-y') + ' ',
-        ref: function ref(node) {
-          _this3.view = node;
-          node && (_this3.viewAttr = parseFloat(window.getComputedStyle(node, null)[attr]));
+      { className: 'load-more-root', style: style, ref: function ref(node) {
+          return _this3.wrap = node;
         } },
-      isPullDown && _react2.default.createElement(
-        'div',
-        {
-          className: 'pull-down ' + (scrollX ? 'scroll-x-item' : 'scroll-y-item') + ' ',
-          ref: function ref(node) {
-            _this3.pullDownBar = node;
-            node && (_this3.pullDownBarAttr = parseFloat(window.getComputedStyle(node, null)[attr]));
-          } },
-        isLoading ? '正在刷新' : '下拉刷新'
-      ),
       _react2.default.createElement(
         'div',
-        {
-          className: (scrollX ? 'scroll-x-item' : 'scroll-y-item') + ' ',
-          ref: function ref(node) {
-            return _this3.container = node;
+        { className: 'load-more-content', ref: function ref(node) {
+            return _this3.content = node;
           } },
-        children.map(function (item, index) {
-          return _react2.default.createElement(
+        !scrollX && isPullDownStatus && !isPullUpStatus && _react2.default.createElement(
+          'div',
+          { className: 'pull-down-bar', ref: function ref(node) {
+              node && (_this3.pullDownBarHeight = parseFloat(window.getComputedStyle(node).height));
+            } },
+          isPullDownStatus === LOADING ? _react2.default.createElement(
             'div',
-            {
-              key: index,
-              className: '' + (scrollX ? 'scroll-x-item' : 'scroll-y-item')
-            },
-            item
-          );
-        })
-      ),
-      fillInAttr && _react2.default.createElement('div', {
-        className: (scrollX ? 'scroll-x-item' : 'scroll-y-item') + ' ',
-        style: fillInStyle[attr] }),
-      isPullUp && _react2.default.createElement(
-        'div',
-        {
-          className: 'pull-up ' + (scrollX && 'scroll-x-item') + ' ' + (scrollY && 'scroll-y-item'),
-          ref: function ref(node) {
-            _this3.pullUpBar = node;
-            node && (_this3.pullUpBarAttr = parseFloat(window.getComputedStyle(node, null)[attr]));
-          } },
-        isLoading ? '正在加载' : '上拉加载'
+            null,
+            'loading'
+          ) : _react2.default.createElement(
+            'span',
+            { className: 'is-transition ' + (isPullDownStatus === TOP ? 'is-rotate' : '') },
+            '\u2193'
+          )
+        ),
+        _react2.default.createElement(
+          'div',
+          {
+            className: 'scroll-view-root ' + (scrollX ? 'scroll-view-x' : 'scroll-view-y') + ' ',
+            ref: function ref(node) {
+              _this3.children = node;
+            } },
+          children.map(function (item, index) {
+            return _react2.default.createElement(
+              'div',
+              {
+                key: 'children' + index,
+                className: '' + (scrollX ? 'scroll-x-item' : 'scroll-y-item')
+              },
+              item
+            );
+          })
+        ),
+        fillAttr && _react2.default.createElement('div', { style: { backgroundColor: 'yellow', height: fillAttr + 'px' } }),
+        !scrollX && isPullUpStatus && !isPullDownStatus && _react2.default.createElement(
+          'div',
+          { className: 'pull-up-bar', ref: function ref(node) {
+              if (node) {
+                _this3.pullUpBarHeight = parseFloat(window.getComputedStyle(node).height);
+              }
+            }
+          },
+          isPullUpStatus === LOADING ? _react2.default.createElement(
+            'div',
+            null,
+            'loading'
+          ) : _react2.default.createElement(
+            'span',
+            { className: 'is-transition ' + (isPullUpStatus === BOTTOM ? 'is-rotate' : '') + ' ' },
+            '\u2191'
+          )
+        )
       )
@@ -401,0 +500,0 @@ );

lib/TabContainer/TabContainer.js

@@ -11,2 +11,4 @@ 'use strict';
 
+var _constants = require('constants');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,5 +28,9 @@
 /*  接受参数: 
-      interval : 触发滚动间距  Number
-      index : 默认 展示第几页 Number
+      interval : 触发滚动间距  Number 默认为屏幕的1/5
+      index : 默认0 展示第几页 Number
       onSel: 回调函数  返回index  Function
+      onTranslate: 回调函数 配合 Navbar 做 bar 联动, 返回一个对象 {
+        distance:  Number // 移动距离
+        transition: Boolean // 是否开始 transition 动画
+      }
 */
@@ -62,7 +68,4 @@ /*
     _this.slideStart = function (e) {
-      console.log(e.changedTouches[0].pageX);
       _this.startX = e.changedTouches[0].pageX;
       _this.startY = e.changedTouches[0].pageY;
-      _this.container.scrollLeft = _this.index * _this.itemWidth;
-      // this.quiescingTouch()
     };
@@ -75,10 +78,11 @@
       var Y = moveEndY - _this.startY;
-
+      var distance = X - _this.itemWidth * _this.index;
       if (!_this.slideDirection || _this.slideDirection === RIGHT || _this.slideDirection === LEFT) {
         if (Math.abs(X) > Math.abs(Y) && X > 0) {
           // right
-          console.log('向右');
+          // event.preventDefault();
+          // event.stopPropagation();
+          console.log('右移');
           if (_this.index !== 0) {
-            var distance = _this.index * _this.itemWidth - X;
-            _this.container.scrollLeft = distance;
+            _this.translate(distance);
           }
@@ -88,6 +92,7 @@ _this.slideDirection = RIGHT;
           // left
-          console.log(' 向左');
+          // event.preventDefault();
+          // event.stopPropagation();
+          console.log('左移');
           if (_this.index !== _this.props.children.length - 1) {
-            var _distance = _this.index * _this.itemWidth - X;
-            _this.container.scrollLeft = _distance;
+            _this.translate(distance);
           }
@@ -97,10 +102,10 @@ _this.slideDirection = LEFT;
           // down
+          if (_this.slideDirection) return;
           _this.slideDirection = DOWN;
           console.log('向下');
-          _this.hideLi();
         } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
           // up 
+          if (_this.slideDirection) return;
           _this.slideDirection = TOP;
           console.log('向上');
-          _this.hideLi();
         }
@@ -111,10 +116,19 @@ }
     _this.slideEnd = function (e) {
-      _this.endX = e.changedTouches[0].clientX;
-      _this.checkTouch();
-      _this.slideDirection = null;
+      _this.endX = e.changedTouches[0].pageX;
+      _this.isTranslate();
     };
 
-    _this.checkTouch = function () {
+    _this.translate = function (distance, transition) {
+      var cssText = '\n        ' + (transition ? 'transition: all 200ms;' : '') + '\n        transform:translateX(' + distance + 'px)\n    ';
+      _this.container.style = cssText;
+      var onTranslate = _this.props.onTranslate;
+
+      onTranslate && onTranslate({ distance: distance, transition: transition });
+    };
+
+    _this.isTranslate = function () {
       if (_this.slideDirection === RIGHT || _this.slideDirection === LEFT) {
-        var distance = Math.abs(_this.endX - _this.startX);
+        var onSel = _this.props.onSel;
+
+        var distance = _this.endX - _this.startX;
         var obj = {
@@ -134,39 +148,15 @@ // 上一页
           // 滑动距离大于阀值  判断左右,跳转下一页 or 上一页
-        };if (distance >= _this.interval) {
+        };if (Math.abs(distance) >= _this.interval) {
           // 判断左右 跳转下一页
+          console.log('上下页切换', _this.index);
           obj[_this.slideDirection]();
+          onSel && onSel(_this.index);
         }
-        _this.animate();
-      } else {
-        _this.showLi();
-        _this.container.scrollLeft = _this.index * _this.itemWidth;
+        _this.translate(-_this.index * _this.itemWidth, true);
       }
+      _this.slideDirection = null;
     };
 
-    _this.animate = function () {
-      var onSel = _this.props.onSel;
-
-      var target = _this.itemWidth * _this.index;
-      console.log('目标的 scrollleft ==> ' + target, _this.timer);
-      _this.timer = setInterval(function () {
-        var step = (target - _this.container.scrollLeft) / 4;
-        // 使用地板,天花板函数的原因在于: step 的值 若为小数 无法触发
-        step = step > 0 ? Math.ceil(step) : Math.floor(step);
-        // console.log('正在进行中', step, this.container.scrollLeft)
-        _this.container.scrollLeft += step;
-        // 在一定限度内 结束 定时器,并将目标值赋予
-        if (Math.abs(target - _this.container.scrollLeft) <= Math.abs(step)) {
-          clearInterval(_this.timer);
-          _this.container.scrollLeft = target;
-          if (_this.oldIndex !== _this.index) {
-            onSel && onSel(_this.index);
-            _this.oldIndex = _this.index;
-          }
-          console.log('进入销毁程序', _this.timer, _this.container.scrollLeft, target);
-        }
-      }, 10);
-    };
-
     _this.itemWidth = window.screen.width;
-    _this.interval = props.interval || parseInt(_this.itemWidth / 4);
+    _this.interval = props.interval || parseInt(_this.itemWidth / 5);
     _this.index = props.index || 0;
@@ -177,60 +167,39 @@ _this.oldIndex = props.index || 0;
 
+  TabContainer.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    console.log('tabcontainer nextProps', nextProps);
+    var index = nextProps.index;
+
+    if (this.index !== index) {
+      this.index = index;
+      this.translate(-index * this.itemWidth, true);
+    }
+  };
+
   TabContainer.prototype.componentDidMount = function componentDidMount() {
-    this.container.scrollLeft = this.index * this.itemWidth;
-    this.container.addEventListener('touchstart', this.slideStart);
-    this.container.addEventListener('touchmove', this.slideMove);
-    this.container.addEventListener('touchend', this.slideEnd);
+    this.translate(-this.index * this.itemWidth);
+    this.root.addEventListener('touchstart', this.slideStart);
+    this.root.addEventListener('touchmove', this.slideMove);
+    this.root.addEventListener('touchend', this.slideEnd);
   };
 
   TabContainer.prototype.componentWillUnmount = function componentWillUnmount() {
-    this.container.removeEventListener('touchstart', this.slideStart);
-    this.container.removeEventListener('touchmove', this.slideMove);
-    this.container.removeEventListener('touchend', this.slideEnd);
-    clearInterval(this.timer);
+    this.root.removeEventListener('touchstart', this.slideStart);
+    this.root.removeEventListener('touchmove', this.slideMove);
+    this.root.removeEventListener('touchend', this.slideEnd);
   };
-  // 触摸开始
-
   // 移动中
 
-
   // 触摸结束
 
-  // 判断用户是查看上一页还是下一页, 并设置回弹效果
 
-  // 缓动动画, 由快到慢
+  /**
+   * 实时移动
+   *
+   * @param {*} distance 移动距离
+   * @param {*} transition 是否开启动画
+   */
 
+  // 判断用户是查看上一页还是下一页, 并设置回弹效果
 
-  // 针对 ios 侧边滑出做出的限制
-  // quiescingTouch() {
-  //   if (this.startX < 30) {
-  //     this.container.removeEventListener('touchmove', this.slideMove)
-  //     this.container.removeEventListener('touchend', this.slideEnd)
-  //     this.hideLi()
-  //     this.wrap.style.overflow = 'hidden'
-  //   } else {
-  //     this.showLi()
-  //     this.wrap.style.overflow = 'visible'
-  //     this.container.addEventListener('touchmove', this.slideMove)
-  //     this.container.addEventListener('touchend', this.slideEnd)
-  //   }
-  // }
-  // 隐藏 li
-  TabContainer.prototype.hideLi = function hideLi() {
-    var els = this.wrap.children;
-    for (var i = 0, len = els.length; i < len; i++) {
-      if (i !== this.index) {
-        els[i].style.display = 'none';
-      }
-    }
-  };
-  // 显示 li
 
-
-  TabContainer.prototype.showLi = function showLi() {
-    var els = this.wrap.children;
-    for (var i = 0, len = els.length; i < len; i++) {
-      els[i].style.display = 'inline-block';
-    }
-  };
-
   TabContainer.prototype.render = function render() {
@@ -242,3 +211,3 @@ var _this2 = this;
       { className: 'tab-container-root', ref: function ref(node) {
-          _this2.container = node;
+          _this2.root = node;
         } },
@@ -248,3 +217,3 @@ _react2.default.createElement(
         { className: 'tab-container', ref: function ref(node) {
-            _this2.wrap = node;
+            _this2.container = node;
           } },
@@ -251,0 +220,0 @@ this.props.children

package.json

 {
   "name": "bestnihon-react-components",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "bestnihon-react-components React component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

umd/bestnihon-react-components.min.js

 /*!
- * bestnihon-react-components v1.0.2
+ * bestnihon-react-components v1.0.3
  * MIT Licensed
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.Y=t(require("react")):e.Y=t(e.React)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(3);n.d(t,"NavBar",function(){return r.a});var o=n(5);n.d(t,"TabContainer",function(){return o.a});var i=n(7);n.d(t,"TabContainerItem",function(){return i.a})},function(e,t,n){"use strict";var r=n(0),o=n.n(r),i=n(4);n.n(i);var a=function(e){function t(n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,e.call(this,n));return r.sel=function(e,t){if(r.state.ind===t)return console.warn("函数节流,不可重复点击");var n=r.props.onSel;r.setState({ind:t}),n&&n(e,t)},r.state={ind:n.ind||0,translate:n.translateX},r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.render=function(){var e=this,t=this.state,n=t.ind,r=t.translate,i=this.props,a=i.NavData,c=i.children,s=a?100/a.length:100/c.length;return this.bar&&(this.bar.style.transform="translateX("+r+"px)"),o.a.createElement("div",{className:"NavBar-root"},a?a.map(function(t,n){return o.a.createElement("span",{key:"Nav"+n,style:{width:s+"%"},className:"Nav-item",onClick:function(){return e.sel(t,n)}},t.name)}):c.map(function(t,n){return o.a.createElement("span",{key:"Nav"+n,style:{width:s+"%"},className:"Nav-item",onClick:function(){return e.sel(t,n)}},t)}),o.a.createElement("div",{className:"Nav-active",style:{width:s+"%",left:n*s+"%"},ref:function(t){return e.bar=t}}))},t}(r.Component);t.a=a},function(e,t){},function(e,t,n){"use strict";var r=n(0),o=n.n(r),i=n(6);n.n(i);var a="left",c="right",s="top",l="down",u=function(e){function t(n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,e.call(this,n));return r.slideStart=function(e){console.log(e.changedTouches[0].pageX),r.startX=e.changedTouches[0].pageX,r.startY=e.changedTouches[0].pageY,r.container.scrollLeft=r.index*r.itemWidth},r.slideMove=function(e){var t=e.changedTouches[0].pageX,n=e.changedTouches[0].pageY,o=t-r.startX,i=n-r.startY;if(!r.slideDirection||r.slideDirection===c||r.slideDirection===a)if(Math.abs(o)>Math.abs(i)&&o>0){if(console.log("向右"),0!==r.index){var u=r.index*r.itemWidth-o;r.container.scrollLeft=u}r.slideDirection=c}else if(Math.abs(o)>Math.abs(i)&&o<0){if(console.log(" 向左"),r.index!==r.props.children.length-1){var f=r.index*r.itemWidth-o;r.container.scrollLeft=f}r.slideDirection=a}else Math.abs(i)>Math.abs(o)&&i>0?(r.slideDirection=l,console.log("向下"),r.hideLi()):Math.abs(i)>Math.abs(o)&&i<0&&(r.slideDirection=s,console.log("向上"),r.hideLi())},r.slideEnd=function(e){r.endX=e.changedTouches[0].clientX,r.checkTouch(),r.slideDirection=null},r.checkTouch=function(){if(r.slideDirection===c||r.slideDirection===a){var e={right:function(){0!==r.index&&r.index--},left:function(){r.index!==r.props.children.length-1&&r.index++}};Math.abs(r.endX-r.startX)>=r.interval&&e[r.slideDirection](),r.animate()}else r.showLi(),r.container.scrollLeft=r.index*r.itemWidth},r.animate=function(){var e=r.props.onSel,t=r.itemWidth*r.index;console.log("目标的 scrollleft ==> "+t,r.timer),r.timer=setInterval(function(){var n=(t-r.container.scrollLeft)/4;n=n>0?Math.ceil(n):Math.floor(n),r.container.scrollLeft+=n,Math.abs(t-r.container.scrollLeft)<=Math.abs(n)&&(clearInterval(r.timer),r.container.scrollLeft=t,r.oldIndex!==r.index&&(e&&e(r.index),r.oldIndex=r.index),console.log("进入销毁程序",r.timer,r.container.scrollLeft,t))},10)},r.itemWidth=window.screen.width,r.interval=n.interval||parseInt(r.itemWidth/4),r.index=n.index||0,r.oldIndex=n.index||0,r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.componentDidMount=function(){this.container.scrollLeft=this.index*this.itemWidth,this.container.addEventListener("touchstart",this.slideStart),this.container.addEventListener("touchmove",this.slideMove),this.container.addEventListener("touchend",this.slideEnd)},t.prototype.componentWillUnmount=function(){this.container.removeEventListener("touchstart",this.slideStart),this.container.removeEventListener("touchmove",this.slideMove),this.container.removeEventListener("touchend",this.slideEnd),clearInterval(this.timer)},t.prototype.hideLi=function(){for(var e=this.wrap.children,t=0,n=e.length;t<n;t++)t!==this.index&&(e[t].style.display="none")},t.prototype.showLi=function(){for(var e=this.wrap.children,t=0,n=e.length;t<n;t++)e[t].style.display="inline-block"},t.prototype.render=function(){var e=this;return o.a.createElement("div",{className:"tab-container-root",ref:function(t){e.container=t}},o.a.createElement("ul",{className:"tab-container",ref:function(t){e.wrap=t}},this.props.children))},t}(r.Component);t.a=u},function(e,t){},function(e,t,n){"use strict";var r=n(0),o=n.n(r),i=n(8),a=(n.n(i),Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e});var c=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,e.apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.render=function(){var e=this,t=Object.assign({},this.props),n=t.style;return n?n.height||(n.height=window.screen.height+"px"):n={height:window.screen.height+"px"},o.a.createElement("li",a({className:"TabContainerItem"},t,{ref:function(t){return e.el=t}}),this.props.children)},t}(r.Component);t.a=c},function(e,t){}]).default});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.Y=e(require("react")):t.Y=e(t.React)}("undefined"!=typeof self?self:this,function(t){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(e,n){e.exports=t},function(t,e,n){t.exports=n(2)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=n(3);n.d(e,"NavBar",function(){return o.a});var r=n(5);n.d(e,"TabContainer",function(){return r.a});var i=n(8);n.d(e,"TabContainerItem",function(){return i.a});var a=n(10);n.d(e,"ScrollView",function(){return a.a});var l=n(15);n.d(e,"LozyLoad",function(){return l.a})},function(t,e,n){"use strict";var o=n(0),r=n.n(o),i=n(4);n.n(i);var a=function(t){function e(n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var o=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.call(this,n));return o.translateBar=function(t){var e=o.props,n=e.NavData,r=e.children,i=n?n.length:r.length,a=t.distance,l=t.transition;o.bar&&(o.bar.style.transition=l?"all 200ms":"none",o.bar.style.transform="translateX("+-a/i+"px)")},o.sel=function(t,e){if(o.bar&&(o.bar.style.transition="all 200ms"),o.state.ind===e)return console.warn("函数节流,不可重复点击");var n=o.props.onSel;n&&n(t,e),o.setState({ind:e})},o.state={ind:n.index||0},o}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.componentWillReceiveProps=function(t){var e=t.index,n=t.translate,o=this.state.ind;e>=0&&e!==o?this.setState({ind:e}):n&&this.translateBar(n)},e.prototype.render=function(){var t=this,e=this.state,n=e.ind,o=(e.translate,e.newInd,this.props),i=o.NavData,a=o.children,l=o.style,c=i?window.screen.width/i.length:window.screen.width/a.length;return r.a.createElement("div",{style:l,className:"NavBar-root",ref:function(e){t.container=e}},i?i.map(function(e,n){return r.a.createElement("span",{key:"Nav"+n,style:{width:c+"px"},className:"Nav-item",onClick:function(){return t.sel(e,n)}},e.name)}):a.map(function(e,n){return r.a.createElement("span",{key:"Nav"+n,style:{width:c+"px"},className:"Nav-item",onClick:function(){return t.sel(e,n)}},e)}),r.a.createElement("div",{className:"Nav-active",style:{width:c+"px",transform:"translatex("+n*c+"px)"},ref:function(e){return t.bar=e}}))},e}(o.Component);e.a=a},function(t,e){},function(t,e,n){"use strict";var o=n(0),r=n.n(o),i=n(6),a=(n.n(i),n(7));n.n(a);var l="left",c="right",s="top",u="down",h=function(t){function e(n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var o=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.call(this,n));return o.slideStart=function(t){o.startX=t.changedTouches[0].pageX,o.startY=t.changedTouches[0].pageY},o.slideMove=function(t){var e=t.changedTouches[0].pageX,n=t.changedTouches[0].pageY,r=e-o.startX,i=n-o.startY,a=r-o.itemWidth*o.index;if(!o.slideDirection||o.slideDirection===c||o.slideDirection===l)if(Math.abs(r)>Math.abs(i)&&r>0)console.log("右移"),0!==o.index&&o.translate(a),o.slideDirection=c;else if(Math.abs(r)>Math.abs(i)&&r<0)console.log("左移"),o.index!==o.props.children.length-1&&o.translate(a),o.slideDirection=l;else if(Math.abs(i)>Math.abs(r)&&i>0){if(o.slideDirection)return;o.slideDirection=u,console.log("向下")}else if(Math.abs(i)>Math.abs(r)&&i<0){if(o.slideDirection)return;o.slideDirection=s,console.log("向上")}},o.slideEnd=function(t){o.endX=t.changedTouches[0].pageX,o.isTranslate()},o.translate=function(t,e){var n="\n        "+(e?"transition: all 200ms;":"")+"\n        transform:translateX("+t+"px)\n    ";o.container.style=n;var r=o.props.onTranslate;r&&r({distance:t,transition:e})},o.isTranslate=function(){if(o.slideDirection===c||o.slideDirection===l){var t=o.props.onSel,e=o.endX-o.startX,n={right:function(){0!==o.index&&o.index--},left:function(){o.index!==o.props.children.length-1&&o.index++}};Math.abs(e)>=o.interval&&(console.log("上下页切换",o.index),n[o.slideDirection](),t&&t(o.index)),o.translate(-o.index*o.itemWidth,!0)}o.slideDirection=null},o.itemWidth=window.screen.width,o.interval=n.interval||parseInt(o.itemWidth/5),o.index=n.index||0,o.oldIndex=n.index||0,o}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.componentWillReceiveProps=function(t){console.log("tabcontainer nextProps",t);var e=t.index;this.index!==e&&(this.index=e,this.translate(-e*this.itemWidth,!0))},e.prototype.componentDidMount=function(){this.translate(-this.index*this.itemWidth),this.root.addEventListener("touchstart",this.slideStart),this.root.addEventListener("touchmove",this.slideMove),this.root.addEventListener("touchend",this.slideEnd)},e.prototype.componentWillUnmount=function(){this.root.removeEventListener("touchstart",this.slideStart),this.root.removeEventListener("touchmove",this.slideMove),this.root.removeEventListener("touchend",this.slideEnd)},e.prototype.render=function(){var t=this;return r.a.createElement("div",{className:"tab-container-root",ref:function(e){t.root=e}},r.a.createElement("ul",{className:"tab-container",ref:function(e){t.container=e}},this.props.children))},e}(o.Component);e.a=h},function(t,e){},function(t,e){t.exports={O_RDONLY:0,O_WRONLY:1,O_RDWR:2,S_IFMT:61440,S_IFREG:32768,S_IFDIR:16384,S_IFCHR:8192,S_IFBLK:24576,S_IFIFO:4096,S_IFLNK:40960,S_IFSOCK:49152,O_CREAT:512,O_EXCL:2048,O_NOCTTY:131072,O_TRUNC:1024,O_APPEND:8,O_DIRECTORY:1048576,O_NOFOLLOW:256,O_SYNC:128,O_SYMLINK:2097152,O_NONBLOCK:4,S_IRWXU:448,S_IRUSR:256,S_IWUSR:128,S_IXUSR:64,S_IRWXG:56,S_IRGRP:32,S_IWGRP:16,S_IXGRP:8,S_IRWXO:7,S_IROTH:4,S_IWOTH:2,S_IXOTH:1,E2BIG:7,EACCES:13,EADDRINUSE:48,EADDRNOTAVAIL:49,EAFNOSUPPORT:47,EAGAIN:35,EALREADY:37,EBADF:9,EBADMSG:94,EBUSY:16,ECANCELED:89,ECHILD:10,ECONNABORTED:53,ECONNREFUSED:61,ECONNRESET:54,EDEADLK:11,EDESTADDRREQ:39,EDOM:33,EDQUOT:69,EEXIST:17,EFAULT:14,EFBIG:27,EHOSTUNREACH:65,EIDRM:90,EILSEQ:92,EINPROGRESS:36,EINTR:4,EINVAL:22,EIO:5,EISCONN:56,EISDIR:21,ELOOP:62,EMFILE:24,EMLINK:31,EMSGSIZE:40,EMULTIHOP:95,ENAMETOOLONG:63,ENETDOWN:50,ENETRESET:52,ENETUNREACH:51,ENFILE:23,ENOBUFS:55,ENODATA:96,ENODEV:19,ENOENT:2,ENOEXEC:8,ENOLCK:77,ENOLINK:97,ENOMEM:12,ENOMSG:91,ENOPROTOOPT:42,ENOSPC:28,ENOSR:98,ENOSTR:99,ENOSYS:78,ENOTCONN:57,ENOTDIR:20,ENOTEMPTY:66,ENOTSOCK:38,ENOTSUP:45,ENOTTY:25,ENXIO:6,EOPNOTSUPP:102,EOVERFLOW:84,EPERM:1,EPIPE:32,EPROTO:100,EPROTONOSUPPORT:43,EPROTOTYPE:41,ERANGE:34,EROFS:30,ESPIPE:29,ESRCH:3,ESTALE:70,ETIME:101,ETIMEDOUT:60,ETXTBSY:26,EWOULDBLOCK:35,EXDEV:18,SIGHUP:1,SIGINT:2,SIGQUIT:3,SIGILL:4,SIGTRAP:5,SIGABRT:6,SIGIOT:6,SIGBUS:10,SIGFPE:8,SIGKILL:9,SIGUSR1:30,SIGSEGV:11,SIGUSR2:31,SIGPIPE:13,SIGALRM:14,SIGTERM:15,SIGCHLD:20,SIGCONT:19,SIGSTOP:17,SIGTSTP:18,SIGTTIN:21,SIGTTOU:22,SIGURG:16,SIGXCPU:24,SIGXFSZ:25,SIGVTALRM:26,SIGPROF:27,SIGWINCH:28,SIGIO:23,SIGSYS:12,SSL_OP_ALL:2147486719,SSL_OP_ALLOW_UNSAFE_LEGACY_RENEGOTIATION:262144,SSL_OP_CIPHER_SERVER_PREFERENCE:4194304,SSL_OP_CISCO_ANYCONNECT:32768,SSL_OP_COOKIE_EXCHANGE:8192,SSL_OP_CRYPTOPRO_TLSEXT_BUG:2147483648,SSL_OP_DONT_INSERT_EMPTY_FRAGMENTS:2048,SSL_OP_EPHEMERAL_RSA:0,SSL_OP_LEGACY_SERVER_CONNECT:4,SSL_OP_MICROSOFT_BIG_SSLV3_BUFFER:32,SSL_OP_MICROSOFT_SESS_ID_BUG:1,SSL_OP_MSIE_SSLV2_RSA_PADDING:0,SSL_OP_NETSCAPE_CA_DN_BUG:536870912,SSL_OP_NETSCAPE_CHALLENGE_BUG:2,SSL_OP_NETSCAPE_DEMO_CIPHER_CHANGE_BUG:1073741824,SSL_OP_NETSCAPE_REUSE_CIPHER_CHANGE_BUG:8,SSL_OP_NO_COMPRESSION:131072,SSL_OP_NO_QUERY_MTU:4096,SSL_OP_NO_SESSION_RESUMPTION_ON_RENEGOTIATION:65536,SSL_OP_NO_SSLv2:16777216,SSL_OP_NO_SSLv3:33554432,SSL_OP_NO_TICKET:16384,SSL_OP_NO_TLSv1:67108864,SSL_OP_NO_TLSv1_1:268435456,SSL_OP_NO_TLSv1_2:134217728,SSL_OP_PKCS1_CHECK_1:0,SSL_OP_PKCS1_CHECK_2:0,SSL_OP_SINGLE_DH_USE:1048576,SSL_OP_SINGLE_ECDH_USE:524288,SSL_OP_SSLEAY_080_CLIENT_DH_BUG:128,SSL_OP_SSLREF2_REUSE_CERT_TYPE_BUG:0,SSL_OP_TLS_BLOCK_PADDING_BUG:512,SSL_OP_TLS_D5_BUG:256,SSL_OP_TLS_ROLLBACK_BUG:8388608,ENGINE_METHOD_DSA:2,ENGINE_METHOD_DH:4,ENGINE_METHOD_RAND:8,ENGINE_METHOD_ECDH:16,ENGINE_METHOD_ECDSA:32,ENGINE_METHOD_CIPHERS:64,ENGINE_METHOD_DIGESTS:128,ENGINE_METHOD_STORE:256,ENGINE_METHOD_PKEY_METHS:512,ENGINE_METHOD_PKEY_ASN1_METHS:1024,ENGINE_METHOD_ALL:65535,ENGINE_METHOD_NONE:0,DH_CHECK_P_NOT_SAFE_PRIME:2,DH_CHECK_P_NOT_PRIME:1,DH_UNABLE_TO_CHECK_GENERATOR:4,DH_NOT_SUITABLE_GENERATOR:8,NPN_ENABLED:1,RSA_PKCS1_PADDING:1,RSA_SSLV23_PADDING:2,RSA_NO_PADDING:3,RSA_PKCS1_OAEP_PADDING:4,RSA_X931_PADDING:5,RSA_PKCS1_PSS_PADDING:6,POINT_CONVERSION_COMPRESSED:2,POINT_CONVERSION_UNCOMPRESSED:4,POINT_CONVERSION_HYBRID:6,F_OK:0,R_OK:4,W_OK:2,X_OK:1,UV_UDP_REUSEADDR:4}},function(t,e,n){"use strict";var o=n(0),r=n.n(o),i=n(9),a=(n.n(i),Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t});var l=function(t){function e(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.render=function(){var t=this,e=Object.assign({},this.props),n=e.style;return n?n.height||(n.height=window.screen.height+"px"):n={height:window.screen.height+"px"},r.a.createElement("li",a({className:"TabContainerItem"},e,{ref:function(e){return t.el=e}}),this.props.children)},e}(o.Component);e.a=l},function(t,e){},function(t,e,n){"use strict";var o=n(11),r=n.n(o),i=n(0),a=n.n(i),l=n(14);n.n(l);function c(t){return function(){var e=t.apply(this,arguments);return new Promise(function(t,n){return function o(r,i){try{var a=e[r](i),l=a.value}catch(t){return void n(t)}if(!a.done)return Promise.resolve(l).then(function(t){o("next",t)},function(t){o("throw",t)});t(l)}("next")})}}var s="top",u="bottom",h="loading",f="touch_top",p="touch_bottom",d=function(t){function e(n){var o=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var i,a,l=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.call(this,n));return l.handleTouchStart=function(t){console.log("触摸开始",l.wrap.scrollTop),l.startY=t.touches[0].clientY},l.handleTouchMove=function(t){var e=l.state,n=e.isPullDown,o=e.isPullUp,r=e.topDistance,i=e.bottomDistance,a=e.isPullDownStatus,c=e.isPullUpStatus,d=l.wrap.scrollTop,E=t.touches[0].clientY,S=void 0;l.direction=E-l.startY>0?p:f,console.log("滚动距离==>"+d,"上拉加载距离==>"+l.bottom),n&&l.direction===p&&0===d&&a!==h&&!c?(event.preventDefault(),l.pullDownBarStartY=l.pullDownBarStartY?l.pullDownBarStartY:t.touches[0].clientY,S=(E-l.pullDownBarStartY)/l.limit,l.translate(S,!1),l.setState({isPullDownStatus:S>=r?s:u}),console.log("开启下拉刷新",S,S>=r?s:u)):o&&l.direction===f&&d>=l.bottom&&c!==h&&!a&&(event.preventDefault(),l.pullUpBarStartY=l.pullUpBarStartY?l.pullUpBarStartY:t.touches[0].clientY,S=(E-l.pullUpBarStartY)/l.limit,l.translate(S,!1),l.setState({isPullUpStatus:Math.abs(S)>=i?u:s}),console.log("开启上拉加载"))},l.handleTouchEnd=function(t){var e=l.state,n=e.isPullDownStatus,o=e.isPullUpStatus,r=e.topMethod,i=e.bottomMethod,a=e.animateTime;l.pullDownBarStartY=null,l.pullUpBarStartY=null,console.log("触摸结束",n,o);var c={top:function(){l.translate(),setTimeout(function(){l.setState({isPullUpStatus:null})},a)},bottom:function(){l.setState({isPullUpStatus:h},function(){l.translate(-l.pullUpBarHeight),i&&l.pullUp(i)})}};n&&{top:function(){l.setState({isPullDownStatus:h},function(){l.translate(l.pullDownBarHeight),r&&l.pullDown(r)})},bottom:function(){l.translate(),setTimeout(function(){l.setState({isPullDownStatus:null})},a)}}[n](),o&&c[o]()},l.setTarget=function(){var t=l.state,e=t.itemIndex,n=t.itemKey,o=t.scrollX,r=l.children.children,i=void 0;if(e)i=e;else if(n)for(var a=0;a<l.children.length;a++)if(console.log("key 值",l.children[a].key),n===l.children[a].key){i=a;break}var c=o?l.children:l.wrap;i>=0&&(o?c.scrollLeft=r[i].offsetLeft:(console.log(r[i]),c.scrollTop=r[i].offsetTop)),setTimeout(function(){c.addEventListener("scroll",l.scroll)},0)},l.fill=function(t){var e=l.state.wrapHeight,n=parseFloat(window.getComputedStyle(l.children).height);l.wrap.style.height=e+"px",l.setState({fillAttr:n<e&&e-n},function(){l.scrollBottom(),t&&l.setTarget()})},l.scroll=function(){var t=l.state,e=t.onLower,n=t.onUpper,o=t.onScroll,r=t.scrollX,i=t.upperThreshold,a=t.lowerThreshold,c=r?"scrollLeft":"scrollTop",s=r?l.children:l.wrap,u=s[c],h=r?parseFloat(window.getComputedStyle(s,null).width):parseFloat(window.getComputedStyle(s,null).height),f=r?s.scrollWidth-h:s.scrollHeight-h;o&&o({scroll:u}),u<=i?n&&n():u>=f-a&&e&&e()},l.pullDown=(i=c(r.a.mark(function t(e){var n,i;return r.a.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return n=l.state.animateTime,t.next=3,e();case 3:(i=t.sent)&&(console.log("下拉刷新执行结束",i),0===l.wrap.scrollTop&&l.translate(),setTimeout(function(){l.setState({isPullDownStatus:null},function(){return l.fill()})},n));case 5:case"end":return t.stop()}},t,o)})),function(t){return i.apply(this,arguments)}),l.pullUp=(a=c(r.a.mark(function t(e){var n,i;return r.a.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return n=l.state.animateTime,t.next=3,e();case 3:(i=t.sent)&&(console.log("上拉加载执行结束",i),l.translate(),setTimeout(function(){l.setState({isPullUpStatus:null},function(){l.fill()})},n));case 5:case"end":return t.stop()}},t,o)})),function(t){return a.apply(this,arguments)}),l.translate=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=l.state,o=n.pullThreshold,r=n.animateTime;console.log("移动距离",t,e,l.content.style.transform),Math.abs(t)>o||(l.content.style.transition=e?"all "+r+"ms ease":"none",l.content.style.transform="translate3d(0, "+t+"px,0)")},l.animate=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:scrollTop;clearInterval(l.timer),console.log("执行 animate"),l.timer=setInterval(function(){var o=(t-e[n])/5;o=o>0?Math.ceil(o):Math.floor(o),e[n]+=o,Math.abs(t-e[n])<=Math.abs(o)&&(clearInterval(l.timer),e[n]=t)},20)},l.scrollBottom=function(){var t=l.state.fillAttr,e=l.children.scrollHeight,n=parseFloat(window.getComputedStyle(l.wrap).height);l.bottom=t?0:e-n},l.limit=4,l.state={isPullDown:n.isPullDown||!1,isPullUp:n.isPullUp||!0,topDistance:n.topDistance||50,bottomDistance:n.bottomDistance||50,isPullDownStatus:null,isPullUpStatus:null,topMethod:n.topMethod,bottomMethod:n.bottomMethod,wrapHeight:n.wrapHeight||window.screen.height,pullThreshold:n.pullThreshold||200,scrollX:n.scrollX||!1,scrollY:n.scrollY||!1,upperThreshold:n.upperThreshold||50,lowerThreshold:n.lowerThreshold||50,onUpper:n.onUpper,onLower:n.onLower,onScroll:n.onScroll,itemIndex:n.itemIndex||!1,itemKey:n.itemKey||!1,animateTime:n.animateTime||300},l}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.componentDidMount=function(){this.state.scrollX?this.setTarget():(this.wrap.addEventListener("touchstart",this.handleTouchStart),this.wrap.addEventListener("touchmove",this.handleTouchMove),this.wrap.addEventListener("touchend",this.handleTouchEnd),this.fill(!0))},e.prototype.componentWillUnmount=function(){this.wrap.removeEventListener("touchstart",this.handleTouchStart),this.wrap.removeEventListener("touchmove",this.handleTouchMove),this.wrap.removeEventListener("touchend",this.handleTouchEnd),(this.state.scrollX?this.children:this.wrap).removeEventListener("scroll",this.scroll),clearInterval(this.timer)},e.prototype.render=function(){var t=this,e=this.state,n=e.isPullDownStatus,o=e.isPullUpStatus,r=e.fillAttr,i=e.scrollX,l=(e.translate,this.props),c=l.style,f=l.children;return a.a.createElement("div",{className:"load-more-root",style:c,ref:function(e){return t.wrap=e}},a.a.createElement("div",{className:"load-more-content",ref:function(e){return t.content=e}},!i&&n&&!o&&a.a.createElement("div",{className:"pull-down-bar",ref:function(e){e&&(t.pullDownBarHeight=parseFloat(window.getComputedStyle(e).height))}},n===h?a.a.createElement("div",null,"loading"):a.a.createElement("span",{className:"is-transition "+(n===s?"is-rotate":"")},"↓")),a.a.createElement("div",{className:"scroll-view-root "+(i?"scroll-view-x":"scroll-view-y")+" ",ref:function(e){t.children=e}},f.map(function(t,e){return a.a.createElement("div",{key:"children"+e,className:i?"scroll-x-item":"scroll-y-item"},t)})),r&&a.a.createElement("div",{style:{backgroundColor:"yellow",height:r+"px"}}),!i&&o&&!n&&a.a.createElement("div",{className:"pull-up-bar",ref:function(e){e&&(t.pullUpBarHeight=parseFloat(window.getComputedStyle(e).height))}},o===h?a.a.createElement("div",null,"loading"):a.a.createElement("span",{className:"is-transition "+(o===u?"is-rotate":"")+" "},"↑"))))},e}(i.Component);e.a=d},function(t,e,n){t.exports=n(12)},function(t,e,n){var o=function(){return this}()||Function("return this")(),r=o.regeneratorRuntime&&Object.getOwnPropertyNames(o).indexOf("regeneratorRuntime")>=0,i=r&&o.regeneratorRuntime;if(o.regeneratorRuntime=void 0,t.exports=n(13),r)o.regeneratorRuntime=i;else try{delete o.regeneratorRuntime}catch(t){o.regeneratorRuntime=void 0}},function(t,e){!function(e){"use strict";var n,o=Object.prototype,r=o.hasOwnProperty,i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",l=i.asyncIterator||"@@asyncIterator",c=i.toStringTag||"@@toStringTag",s="object"==typeof t,u=e.regeneratorRuntime;if(u)s&&(t.exports=u);else{(u=e.regeneratorRuntime=s?t.exports:{}).wrap=v;var h="suspendedStart",f="suspendedYield",p="executing",d="completed",E={},S={};S[a]=function(){return this};var m=Object.getPrototypeOf,_=m&&m(m(R([])));_&&_!==o&&r.call(_,a)&&(S=_);var O=w.prototype=T.prototype=Object.create(S);N.prototype=O.constructor=w,w.constructor=N,w[c]=N.displayName="GeneratorFunction",u.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===N||"GeneratorFunction"===(e.displayName||e.name))},u.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,w):(t.__proto__=w,c in t||(t[c]="GeneratorFunction")),t.prototype=Object.create(O),t},u.awrap=function(t){return{__await:t}},g(P.prototype),P.prototype[l]=function(){return this},u.AsyncIterator=P,u.async=function(t,e,n,o){var r=new P(v(t,e,n,o));return u.isGeneratorFunction(e)?r:r.next().then(function(t){return t.done?t.value:r.next()})},g(O),O[c]="Generator",O[a]=function(){return this},O.toString=function(){return"[object Generator]"},u.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var o=e.pop();if(o in t)return n.value=o,n.done=!1,n}return n.done=!0,n}},u.values=R,D.prototype={constructor:D,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=n,this.done=!1,this.delegate=null,this.method="next",this.arg=n,this.tryEntries.forEach(b),!t)for(var e in this)"t"===e.charAt(0)&&r.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=n)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function o(o,r){return l.type="throw",l.arg=t,e.next=o,r&&(e.method="next",e.arg=n),!!r}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],l=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var c=r.call(a,"catchLoc"),s=r.call(a,"finallyLoc");if(c&&s){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(c){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,E):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),E},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),b(n),E}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var o=n.completion;if("throw"===o.type){var r=o.arg;b(n)}return r}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,o){return this.delegate={iterator:R(t),resultName:e,nextLoc:o},"next"===this.method&&(this.arg=n),E}}}function v(t,e,n,o){var r=e&&e.prototype instanceof T?e:T,i=Object.create(r.prototype),a=new D(o||[]);return i._invoke=function(t,e,n){var o=h;return function(r,i){if(o===p)throw new Error("Generator is already running");if(o===d){if("throw"===r)throw i;return C()}for(n.method=r,n.arg=i;;){var a=n.delegate;if(a){var l=I(a,n);if(l){if(l===E)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===h)throw o=d,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=p;var c=y(t,e,n);if("normal"===c.type){if(o=n.done?d:f,c.arg===E)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(o=d,n.method="throw",n.arg=c.arg)}}}(t,n,a),i}function y(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}function T(){}function N(){}function w(){}function g(t){["next","throw","return"].forEach(function(e){t[e]=function(t){return this._invoke(e,t)}})}function P(t){var e;this._invoke=function(n,o){function i(){return new Promise(function(e,i){!function e(n,o,i,a){var l=y(t[n],t,o);if("throw"!==l.type){var c=l.arg,s=c.value;return s&&"object"==typeof s&&r.call(s,"__await")?Promise.resolve(s.__await).then(function(t){e("next",t,i,a)},function(t){e("throw",t,i,a)}):Promise.resolve(s).then(function(t){c.value=t,i(c)},a)}a(l.arg)}(n,o,e,i)})}return e=e?e.then(i,i):i()}}function I(t,e){var o=t.iterator[e.method];if(o===n){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=n,I(t,e),"throw"===e.method))return E;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return E}var r=y(o,t.iterator,e.arg);if("throw"===r.type)return e.method="throw",e.arg=r.arg,e.delegate=null,E;var i=r.arg;return i?i.done?(e[t.resultName]=i.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=n),e.delegate=null,E):i:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,E)}function L(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function b(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function D(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(L,this),this.reset(!0)}function R(t){if(t){var e=t[a];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,i=function e(){for(;++o<t.length;)if(r.call(t,o))return e.value=t[o],e.done=!1,e;return e.value=n,e.done=!0,e};return i.next=i}}return{next:C}}function C(){return{value:n,done:!0}}}(function(){return this}()||Function("return this")())},function(t,e){},function(t,e,n){"use strict";var o=n(0),r=n.n(o),i=n(16),a=n(17),l=(n.n(a),n(18)),c=n.n(l),s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t};var u=function(t){function e(n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var o=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.call(this,n));return o.lazyLoad=o.lazyLoad.bind(o,n.src),o}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.componentDidMount=function(){this.isScroll(),window.addEventListener("scroll",this.lazyLoad),window.addEventListener("resize",this.lazyLoad)},e.prototype.componentWillUnmount=function(){window.removeEventListener("scroll",this.lazyLoad),window.removeEventListener("resize",this.lazyLoad)},e.prototype.isScroll=function(){document.body.clientHeight<=i.a.clientHeight()&&this.lazyLoad()},e.prototype.lazyLoad=function(t){i.a.availHeight()+i.a.scrollTop()>this.img.offsetTop-100&&(this.img.src=t)},e.prototype.render=function(){var t=this,e=Object.assign({},this.props);return e.src=c.a,r.a.createElement("div",{className:"LazyLoadImg"},r.a.createElement("img",s({},e,{alt:"",ref:function(e){t.img=e}})))},e}(o.Component);e.a=u},function(t,e,n){"use strict";var o=function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t)}return t.maxWidth=function(){return Math.min(640,this.clientWidth())},t.documentElement=function(){return document.body.clientWidth+document.body.clientHeight+document.body.scrollWidth+document.body.scrollHeight+document.body.scrollTop>document.documentElement.clientWidth+document.documentElement.clientHeight+document.documentElement.scrollWidth+document.documentElement.scrollHeight+document.documentElement.scrollTop?document.body:document.documentElement},t.rootElement=function(){return document.getElementById("root")},t.availWidth=function(){return window.screen.availWidth},t.availHeight=function(){return window.screen.availHeight},t.scrollHeight=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)},t.scrollWidth=function(){return Math.max(document.body.scrollWidth,document.documentElement.scrollWidth)},t.scrollTop=function(){return Math.max(document.body.scrollTop,document.documentElement.scrollTop)},t.scrollToTop=function(){window.scrollTo(0,0)},t.setScrollTop=function(t){document.body.scrollTop=t,document.documentElement.scrollTop=t},t.clientHeight=function(){return Math.max(document.body.clientHeight,document.documentElement.clientHeight)},t.clientWidth=function(){return Math.max(document.body.clientWidth,document.documentElement.clientWidth)},t.resetFontSize=function(){var e=t.maxWidth()/7.5;t.fontSize=e,document.documentElement.style.fontSize=e+"px",document.body.style.maxWidth=t.maxWidth()+"px"},t.setInstance=function(e){t.app=e},t.removeInstance=function(){t.app=void 0},t.alert=function(e,n){t.app.setState({alert:{message:e,onClose:function(){t.app.setState({alert:void 0},function(){n&&n()})}}})},t.confirm=function(e,n,o,r){t.app.setState({confirm:{title:e,message:n,onConfirm:function(){t.app.setState({confirm:void 0},function(){o&&o()})},onCancel:function(){t.app.setState({confirm:void 0},function(){r&&r()})}}})},t.loading=function(e,n){t.app.setState({loading:e},function(){n&&n()})},t.isHorizontal=function(){return t.clientWidth()>t.clientHeight()},t.selectDistrict=function(e,n){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{includedIds:void 0};t.app.setState({districtSelect:{includedIds:o&&o.includedIds&&o.includedIds.length>0?o.includedIds:void 0,onSelected:function(n,o,r){t.app.setState({districtSelect:void 0}),e&&e(n,o,r)},onClose:function(){t.app.setState({districtSelect:void 0}),n&&n()}}})},t.pickDate=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{date:void 0,onClose:void 0};t.app.setState({datePick:{date:n.date,onPicked:function(n){t.app.setState({datePick:void 0}),e&&e(n)},onClose:function(){t.app.setState({datePick:void 0}),n.onClose&&n.onClose()}}})},t}();e.a=o},function(t,e){},function(t,e,n){t.exports=n.p+"whitebg.61622362.png"}]).default});
 //# sourceMappingURL=bestnihon-react-components.min.js.map

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

317248

increased by133.04%

Lines of code

4177

increased by67.08%

Worsened metrics

Number of package files

25

decreased by-26.47%

Number of medium supply chain risk alerts

5

increased by400%

No dependency changes