bestnihon-react-components - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

es/index.js

@@ -0,6 +1,6 @@
+import _NavBar from './NavBar/NavBar';
+export { _NavBar as NavBar };
 import _TabContainer from "./TabContainer/TabContainer";
 export { _TabContainer as TabContainer };
 import _TabContainerItem from './TabContainerItem/TabContainerItem';
-export { _TabContainerItem as TabContainerItem };
-import _NavBar from './NavBar/NavBar';
-export { _NavBar as NavBar };
+export { _TabContainerItem as TabContainerItem };

es/NavBar/NavBar.js

@@ -10,16 +10,91 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+/* NavBar 有两种情况 
+    1. bar 中无其他样式,bar 点击后 bar 的图标无变化,只是颜色字体变化
+    2. bar 中有其他样式, bar点击后 bar 的图标和颜色发生变化,所以需要有个 NavItem来配合
+*/
+/* 定义: 
+    NavData:  数组  
+      eg: [{name: '首页', type: 1}, {name: '购物车', type: 2}]  类似于这样的
+
+    onSel: 回调函数
+      (item,index) => {console.log(item,index)} 
+
+    ind: 展示第几个 navbar, 默认第一个, 从零开始
+
+    TODO: 功能点==> 当 NavBar 与 TabContainer 搭配使用时, TabContainer 滑动, Nav的 Bar 也随着同步移动
+    translate: 通过 TabContianer 回调传过来的 移动值
+      实际的值应该根据 NavBar 的 length 来算, translate = translate / length, 应当为 1: length
+      
+*/
+
 var NavBar = function (_Component) {
   _inherits(NavBar, _Component);
 
-  function NavBar() {
+  function NavBar(props) {
     _classCallCheck(this, NavBar);
 
-    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+    _this.sel = function (item, index) {
+      var ind = _this.state.ind;
+      // 函数节流
+
+      if (ind === index) return console.warn('函数节流,不可重复点击');
+      var onSel = _this.props.onSel;
+
+      _this.setState({ ind: index });
+      onSel && onSel(item, index);
+    };
+
+    _this.state = {
+      ind: props.ind || 0,
+      translate: props.translateX
+    };
+    return _this;
   }
 
   NavBar.prototype.render = function render() {
+    var _this2 = this;
+
+    var _state = this.state,
+        ind = _state.ind,
+        translate = _state.translate;
+    var _props = this.props,
+        NavData = _props.NavData,
+        children = _props.children;
+
+    var itemWidth = NavData ? 100 / NavData.length : 100 / children.length;
+    // 同步移动
+    this.bar && (this.bar.style.transform = 'translateX(' + translate + 'px)');
     return React.createElement(
       'div',
-      null,
-      '\u6D4B\u8BD5\u7528\u7684\u5BFC\u822A\u680F'
+      { className: 'NavBar-root' },
+      NavData ? NavData.map(function (item, index) {
+        return React.createElement(
+          'span',
+          {
+            key: 'Nav' + index,
+            style: { width: itemWidth + '%' },
+            className: 'Nav-item',
+            onClick: function onClick() {
+              return _this2.sel(item, index);
+            } },
+          item.name
+        );
+      }) : children.map(function (item, index) {
+        return React.createElement(
+          'span',
+          {
+            key: 'Nav' + index,
+            style: { width: itemWidth + '%' },
+            className: 'Nav-item',
+            onClick: function onClick() {
+              return _this2.sel(item, index);
+            } },
+          item
+        );
+      }),
+      React.createElement('div', { className: 'Nav-active', style: { width: itemWidth + '%', left: ind * itemWidth + '%' }, ref: function ref(node) {
+          return _this2.bar = node;
+        } })
     );
@@ -26,0 +101,0 @@ };

es/TabContainer/TabContainer.js

@@ -14,198 +14,226 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-/*
-    interval : 触发滚动间距
-    index : 默认 展示第几页
+/*  接受参数: 
+      interval : 触发滚动间距  Number
+      index : 默认 展示第几页 Number
+      onSel: 回调函数  返回index  Function
 */
+/* 
+  必须与 TabContainerItem 搭配使用
+    ex:   <TabContainer>
+            <TabContainerItem style={{ fontSize: '20px', backgroundColor: 'red' ,height: '500px'}}>
+            {arr.map(i => {
+                return <div key={i}>{i}</div>
+            })}
+            </TabContainerItem>
+            <TabContainerItem style={{ backgroundColor: 'yellow' }}>
+            {arr.map(i => {
+                return <div key={i}>{i}</div>
+            })}
+            </TabContainerItem>
+            <TabContainerItem style={{ backgroundColor: 'skyblue' }}>
+            {arr.map(i => {
+                return <div key={i}>{i}</div>
+            })}
+            </TabContainerItem>
+          </TabContainer>
 
+*/
+
 var TabContainer = function (_Component) {
-    _inherits(TabContainer, _Component);
+  _inherits(TabContainer, _Component);
 
-    function TabContainer(props) {
-        _classCallCheck(this, TabContainer);
+  function TabContainer(props) {
+    _classCallCheck(this, TabContainer);
 
-        var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-        _this.slideStart = function (e) {
-            console.log(e.changedTouches[0].pageX);
-            _this.startX = e.changedTouches[0].pageX;
-            _this.startY = e.changedTouches[0].pageY;
-            _this.quiescingTouch();
-        };
+    _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()
+    };
 
-        _this.slideMove = function (e) {
-            var moveEndX = e.changedTouches[0].pageX;
-            var moveEndY = e.changedTouches[0].pageY;
-            var X = moveEndX - _this.startX;
-            var Y = moveEndY - _this.startY;
-            if (Math.abs(X) > Math.abs(Y) && X > 0) {
-                // right
-                console.log('向右', X, _this.container.scrollLeft);
-                _this.touchDes = RIGHT;
-                if (_this.index !== 0) {
-                    _this.container.scrollLeft = _this.index * _this.itemWidth - X;
-                }
-            } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
-                // left
-                console.log('向左', X, _this.container.scrollLeft);
-                _this.touchDes = LEFT;
-                if (_this.index !== _this.props.children.length - 1) {
-                    _this.container.scrollLeft = _this.index * _this.itemWidth - X;
-                }
-            } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
-                // down
-                console.log('向下');
-                _this.touchDes = DOWN;
-            } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
-                // up 
-                console.log('向上');
-                _this.touchDes = TOP;
-            } else {
-                //没有发生滑动 
-                console.log('没有发生滑动');
-            }
-        };
+    _this.slideMove = function (e) {
+      var moveEndX = e.changedTouches[0].pageX;
+      var moveEndY = e.changedTouches[0].pageY;
+      var X = moveEndX - _this.startX;
+      var Y = moveEndY - _this.startY;
 
-        _this.slideEnd = function (e) {
-            _this.endX = e.changedTouches[0].clientX;
-            console.log('touch 结束');
-            if (!_this.timer) {
-                console.log('没有进行中 timer 进入 check');
-                _this.checkTouch();
-            }
-        };
+      if (!_this.slideDirection || _this.slideDirection === RIGHT || _this.slideDirection === LEFT) {
+        if (Math.abs(X) > Math.abs(Y) && X > 0) {
+          // right
+          console.log('向右');
+          if (_this.index !== 0) {
+            var distance = _this.index * _this.itemWidth - X;
+            _this.container.scrollLeft = distance;
+          }
+          _this.slideDirection = RIGHT;
+        } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
+          // left
+          console.log(' 向左');
+          if (_this.index !== _this.props.children.length - 1) {
+            var _distance = _this.index * _this.itemWidth - X;
+            _this.container.scrollLeft = _distance;
+          }
+          _this.slideDirection = LEFT;
+        } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
+          // down
+          _this.slideDirection = DOWN;
+          console.log('向下');
+          _this.hideLi();
+        } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
+          // up 
+          _this.slideDirection = TOP;
+          console.log('向上');
+          _this.hideLi();
+        }
+      }
+    };
 
-        _this.checkTouch = function () {
-            if (_this.touchDes === RIGHT || _this.touchDes === LEFT) {
-                var distance = Math.abs(_this.endX - _this.startX);
-                var obj = {
-                    // 上一页
-                    'right': function right() {
-                        if (_this.index !== 0) {
-                            _this.index--;
-                        }
-                    },
-                    // 下一页
-                    'left': function left() {
-                        if (_this.index !== _this.props.children.length - 1) {
-                            _this.index++;
-                        }
-                    }
-                    // 滑动距离大于阀值  判断左右,跳转下一页 or 上一页
-                };if (distance >= _this.interval) {
-                    // 判断左右 跳转下一页
-                    obj[_this.touchDes]();
-                }
-                // this.animate()
+    _this.slideEnd = function (e) {
+      _this.endX = e.changedTouches[0].clientX;
+      _this.checkTouch();
+      _this.slideDirection = null;
+    };
+
+    _this.checkTouch = function () {
+      if (_this.slideDirection === RIGHT || _this.slideDirection === LEFT) {
+        var distance = Math.abs(_this.endX - _this.startX);
+        var obj = {
+          // 上一页
+          'right': function right() {
+            if (_this.index !== 0) {
+              _this.index--;
             }
-            //  问题来了 ? 为什么不在 左滑右滑中执行 animate 的原因
-            // 最开始 animate 执行的目的在于 上一页 下一页  回弹效果
-            // 现在无论是上下左右滑 都要执行的原因是: 有一种很不正常的操作, 当用户在左滑到一定限度之后,开始在原点上下滑动,这样我之前在左右滑中执行的逻辑就错了,
-            // 这样会造成页面停留在content1 和 content2 的中间滚动点,就很尴尬. 所以现在无论怎么滑 在touch 结束的时候 都执行一下
-            _this.animate();
-        };
+          },
+          // 下一页
+          'left': function left() {
+            if (_this.index !== _this.props.children.length - 1) {
+              _this.index++;
+            }
+          }
+          // 滑动距离大于阀值  判断左右,跳转下一页 or 上一页
+        };if (distance >= _this.interval) {
+          // 判断左右 跳转下一页
+          obj[_this.slideDirection]();
+        }
+        _this.animate();
+      } else {
+        _this.showLi();
+        _this.container.scrollLeft = _this.index * _this.itemWidth;
+      }
+    };
 
-        _this.animate = function () {
-            var target = _this.itemWidth * _this.index;
-            console.log('目标的 scrollleft ==> ' + target);
-            _this.timer = setInterval(function () {
-                var step = (target - _this.container.scrollLeft) / 5;
-                // 使用地板,天花板函数的原因在于: 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.timer = undefined;
-                    _this.container.scrollLeft = target;
-                    console.log('进入销毁程序', _this.container.scrollLeft, target);
-                }
-            }, 10);
-        };
+    _this.animate = function () {
+      var onSel = _this.props.onSel;
 
-        _this.itemWidth = window.screen.width;
-        _this.interval = props.interval || parseInt(_this.itemWidth / 3);
-        _this.index = props.index || 0;
-        return _this;
-    }
-
-    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)
+      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);
     };
 
-    TabContainer.prototype.componentWillUnmount = function componentWillUnmount() {
-        this.container.removeEventListener('touchstart', this.slideStart);
-        this.container.removeEventListener('touchmove', this.slideMove);
-        this.container.removeEventListener('touchend', this.slideEnd);
-    };
-    // 触摸开始
+    _this.itemWidth = window.screen.width;
+    _this.interval = props.interval || parseInt(_this.itemWidth / 4);
+    _this.index = props.index || 0;
+    _this.oldIndex = props.index || 0;
+    return _this;
+  }
 
-    // 移动中
+  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);
+  };
 
-    // 触摸结束
+  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);
+  };
+  // 触摸开始
 
-    // 判断用户是查看上一页还是下一页, 并设置回弹效果
+  // 移动中
 
-    // 这是一个缓动动画, 由快到慢
 
+  // 触摸结束
 
-    // 针对 ios 侧边滑出做出的限制
-    TabContainer.prototype.quiescingTouch = function 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 {
-            console.log('我应该进入这个');
-            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';
-            }
-        }
-    };
+  // 针对 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() {
-        var _this2 = this;
+  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';
+    }
+  };
 
-        return React.createElement(
-            'div',
-            { className: 'tab-container-root', ref: function ref(node) {
-                    _this2.container = node;
-                } },
-            React.createElement(
-                'ul',
-                { className: 'tab-container', ref: function ref(node) {
-                        _this2.wrap = node;
-                    } },
-                this.props.children
-            )
-        );
-    };
+  TabContainer.prototype.render = function render() {
+    var _this2 = this;
 
-    return TabContainer;
+    return React.createElement(
+      'div',
+      { className: 'tab-container-root', ref: function ref(node) {
+          _this2.container = node;
+        } },
+      React.createElement(
+        'ul',
+        { className: 'tab-container', ref: function ref(node) {
+            _this2.wrap = node;
+          } },
+        this.props.children
+      )
+    );
+  };
+
+  return TabContainer;
 }(Component);
 
 export default TabContainer;

es/TabContainerItem/TabContainerItem.js

@@ -0,1 +1,3 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -10,2 +12,6 @@
 
+/* 
+    在 style 属性中传下 height 属性, 不传默认全屏高度
+*/
+
 var TabContainerItem = function (_Component) {
@@ -20,7 +26,2 @@ _inherits(TabContainerItem, _Component);
 
-  TabContainerItem.prototype.componentDidMount = function componentDidMount() {
-    // console.log(this.el)
-
-  };
-
   TabContainerItem.prototype.render = function render() {
@@ -30,9 +31,17 @@ var _this2 = this;
     // console.log(this.props)
-    var style = this.props.style;
+    var props = Object.assign({}, this.props);
+    var style = props.style;
 
+    // 默认高度为整屏高度
+
+    if (!style) {
+      style = { height: window.screen.height + 'px' };
+    } else if (!style.height) {
+      style.height = window.screen.height + 'px';
+    }
     return React.createElement(
       'li',
-      { className: 'TabContainerItem', style: style, ref: function ref(node) {
+      _extends({ className: 'TabContainerItem' }, props, { ref: function ref(node) {
           return _this2.el = node;
-        } },
+        } }),
       this.props.children
@@ -39,0 +48,0 @@ );

lib/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.NavBar = exports.TabContainerItem = exports.TabContainer = undefined;
+exports.TabContainerItem = exports.TabContainer = exports.NavBar = undefined;
 
+var _NavBar2 = require('./NavBar/NavBar');
+
+var _NavBar3 = _interopRequireDefault(_NavBar2);
+
 var _TabContainer2 = require('./TabContainer/TabContainer');
@@ -14,10 +18,6 @@
 
-var _NavBar2 = require('./NavBar/NavBar');
-
-var _NavBar3 = _interopRequireDefault(_NavBar2);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+exports.NavBar = _NavBar3.default;
 exports.TabContainer = _TabContainer3.default;
-exports.TabContainerItem = _TabContainerItem3.default;
-exports.NavBar = _NavBar3.default;
+exports.TabContainerItem = _TabContainerItem3.default;

lib/NavBar/NavBar.js

@@ -19,16 +19,90 @@ 'use strict';
 
+/* NavBar 有两种情况 
+    1. bar 中无其他样式,bar 点击后 bar 的图标无变化,只是颜色字体变化
+    2. bar 中有其他样式, bar点击后 bar 的图标和颜色发生变化,所以需要有个 NavItem来配合
+*/
+/* 定义: 
+    NavData:  数组  
+      eg: [{name: '首页', type: 1}, {name: '购物车', type: 2}]  类似于这样的
+
+    onSel: 回调函数
+      (item,index) => {console.log(item,index)} 
+
+    ind: 展示第几个 navbar, 默认第一个, 从零开始
+
+    TODO: 功能点==> 当 NavBar 与 TabContainer 搭配使用时, TabContainer 滑动, Nav的 Bar 也随着同步移动
+    translate: 通过 TabContianer 回调传过来的 移动值
+      实际的值应该根据 NavBar 的 length 来算, translate = translate / length, 应当为 1: length
+      
+*/
 var NavBar = function (_Component) {
   _inherits(NavBar, _Component);
 
-  function NavBar() {
+  function NavBar(props) {
     _classCallCheck(this, NavBar);
 
-    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+    _this.sel = function (item, index) {
+      var ind = _this.state.ind;
+      // 函数节流
+
+      if (ind === index) return console.warn('函数节流,不可重复点击');
+      var onSel = _this.props.onSel;
+
+      _this.setState({ ind: index });
+      onSel && onSel(item, index);
+    };
+
+    _this.state = {
+      ind: props.ind || 0,
+      translate: props.translateX
+    };
+    return _this;
   }
 
   NavBar.prototype.render = function render() {
+    var _this2 = this;
+
+    var _state = this.state,
+        ind = _state.ind,
+        translate = _state.translate;
+    var _props = this.props,
+        NavData = _props.NavData,
+        children = _props.children;
+
+    var itemWidth = NavData ? 100 / NavData.length : 100 / children.length;
+    // 同步移动
+    this.bar && (this.bar.style.transform = 'translateX(' + translate + 'px)');
     return _react2.default.createElement(
       'div',
-      null,
-      '\u6D4B\u8BD5\u7528\u7684\u5BFC\u822A\u680F'
+      { className: 'NavBar-root' },
+      NavData ? NavData.map(function (item, index) {
+        return _react2.default.createElement(
+          'span',
+          {
+            key: 'Nav' + index,
+            style: { width: itemWidth + '%' },
+            className: 'Nav-item',
+            onClick: function onClick() {
+              return _this2.sel(item, index);
+            } },
+          item.name
+        );
+      }) : children.map(function (item, index) {
+        return _react2.default.createElement(
+          'span',
+          {
+            key: 'Nav' + index,
+            style: { width: itemWidth + '%' },
+            className: 'Nav-item',
+            onClick: function onClick() {
+              return _this2.sel(item, index);
+            } },
+          item
+        );
+      }),
+      _react2.default.createElement('div', { className: 'Nav-active', style: { width: itemWidth + '%', left: ind * itemWidth + '%' }, ref: function ref(node) {
+          return _this2.bar = node;
+        } })
     );
@@ -35,0 +109,0 @@ };

lib/TabContainer/TabContainer.js

@@ -24,196 +24,224 @@ 'use strict';
 
-/*
-    interval : 触发滚动间距
-    index : 默认 展示第几页
+/*  接受参数: 
+      interval : 触发滚动间距  Number
+      index : 默认 展示第几页 Number
+      onSel: 回调函数  返回index  Function
 */
+/* 
+  必须与 TabContainerItem 搭配使用
+    ex:   <TabContainer>
+            <TabContainerItem style={{ fontSize: '20px', backgroundColor: 'red' ,height: '500px'}}>
+            {arr.map(i => {
+                return <div key={i}>{i}</div>
+            })}
+            </TabContainerItem>
+            <TabContainerItem style={{ backgroundColor: 'yellow' }}>
+            {arr.map(i => {
+                return <div key={i}>{i}</div>
+            })}
+            </TabContainerItem>
+            <TabContainerItem style={{ backgroundColor: 'skyblue' }}>
+            {arr.map(i => {
+                return <div key={i}>{i}</div>
+            })}
+            </TabContainerItem>
+          </TabContainer>
 
+*/
+
 var TabContainer = function (_Component) {
-    _inherits(TabContainer, _Component);
+  _inherits(TabContainer, _Component);
 
-    function TabContainer(props) {
-        _classCallCheck(this, TabContainer);
+  function TabContainer(props) {
+    _classCallCheck(this, TabContainer);
 
-        var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-        _this.slideStart = function (e) {
-            console.log(e.changedTouches[0].pageX);
-            _this.startX = e.changedTouches[0].pageX;
-            _this.startY = e.changedTouches[0].pageY;
-            _this.quiescingTouch();
-        };
+    _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()
+    };
 
-        _this.slideMove = function (e) {
-            var moveEndX = e.changedTouches[0].pageX;
-            var moveEndY = e.changedTouches[0].pageY;
-            var X = moveEndX - _this.startX;
-            var Y = moveEndY - _this.startY;
-            if (Math.abs(X) > Math.abs(Y) && X > 0) {
-                // right
-                console.log('向右', X, _this.container.scrollLeft);
-                _this.touchDes = RIGHT;
-                if (_this.index !== 0) {
-                    _this.container.scrollLeft = _this.index * _this.itemWidth - X;
-                }
-            } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
-                // left
-                console.log('向左', X, _this.container.scrollLeft);
-                _this.touchDes = LEFT;
-                if (_this.index !== _this.props.children.length - 1) {
-                    _this.container.scrollLeft = _this.index * _this.itemWidth - X;
-                }
-            } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
-                // down
-                console.log('向下');
-                _this.touchDes = DOWN;
-            } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
-                // up 
-                console.log('向上');
-                _this.touchDes = TOP;
-            } else {
-                //没有发生滑动 
-                console.log('没有发生滑动');
-            }
-        };
+    _this.slideMove = function (e) {
+      var moveEndX = e.changedTouches[0].pageX;
+      var moveEndY = e.changedTouches[0].pageY;
+      var X = moveEndX - _this.startX;
+      var Y = moveEndY - _this.startY;
 
-        _this.slideEnd = function (e) {
-            _this.endX = e.changedTouches[0].clientX;
-            console.log('touch 结束');
-            if (!_this.timer) {
-                console.log('没有进行中 timer 进入 check');
-                _this.checkTouch();
-            }
-        };
+      if (!_this.slideDirection || _this.slideDirection === RIGHT || _this.slideDirection === LEFT) {
+        if (Math.abs(X) > Math.abs(Y) && X > 0) {
+          // right
+          console.log('向右');
+          if (_this.index !== 0) {
+            var distance = _this.index * _this.itemWidth - X;
+            _this.container.scrollLeft = distance;
+          }
+          _this.slideDirection = RIGHT;
+        } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
+          // left
+          console.log(' 向左');
+          if (_this.index !== _this.props.children.length - 1) {
+            var _distance = _this.index * _this.itemWidth - X;
+            _this.container.scrollLeft = _distance;
+          }
+          _this.slideDirection = LEFT;
+        } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
+          // down
+          _this.slideDirection = DOWN;
+          console.log('向下');
+          _this.hideLi();
+        } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
+          // up 
+          _this.slideDirection = TOP;
+          console.log('向上');
+          _this.hideLi();
+        }
+      }
+    };
 
-        _this.checkTouch = function () {
-            if (_this.touchDes === RIGHT || _this.touchDes === LEFT) {
-                var distance = Math.abs(_this.endX - _this.startX);
-                var obj = {
-                    // 上一页
-                    'right': function right() {
-                        if (_this.index !== 0) {
-                            _this.index--;
-                        }
-                    },
-                    // 下一页
-                    'left': function left() {
-                        if (_this.index !== _this.props.children.length - 1) {
-                            _this.index++;
-                        }
-                    }
-                    // 滑动距离大于阀值  判断左右,跳转下一页 or 上一页
-                };if (distance >= _this.interval) {
-                    // 判断左右 跳转下一页
-                    obj[_this.touchDes]();
-                }
-                // this.animate()
+    _this.slideEnd = function (e) {
+      _this.endX = e.changedTouches[0].clientX;
+      _this.checkTouch();
+      _this.slideDirection = null;
+    };
+
+    _this.checkTouch = function () {
+      if (_this.slideDirection === RIGHT || _this.slideDirection === LEFT) {
+        var distance = Math.abs(_this.endX - _this.startX);
+        var obj = {
+          // 上一页
+          'right': function right() {
+            if (_this.index !== 0) {
+              _this.index--;
             }
-            //  问题来了 ? 为什么不在 左滑右滑中执行 animate 的原因
-            // 最开始 animate 执行的目的在于 上一页 下一页  回弹效果
-            // 现在无论是上下左右滑 都要执行的原因是: 有一种很不正常的操作, 当用户在左滑到一定限度之后,开始在原点上下滑动,这样我之前在左右滑中执行的逻辑就错了,
-            // 这样会造成页面停留在content1 和 content2 的中间滚动点,就很尴尬. 所以现在无论怎么滑 在touch 结束的时候 都执行一下
-            _this.animate();
-        };
+          },
+          // 下一页
+          'left': function left() {
+            if (_this.index !== _this.props.children.length - 1) {
+              _this.index++;
+            }
+          }
+          // 滑动距离大于阀值  判断左右,跳转下一页 or 上一页
+        };if (distance >= _this.interval) {
+          // 判断左右 跳转下一页
+          obj[_this.slideDirection]();
+        }
+        _this.animate();
+      } else {
+        _this.showLi();
+        _this.container.scrollLeft = _this.index * _this.itemWidth;
+      }
+    };
 
-        _this.animate = function () {
-            var target = _this.itemWidth * _this.index;
-            console.log('目标的 scrollleft ==> ' + target);
-            _this.timer = setInterval(function () {
-                var step = (target - _this.container.scrollLeft) / 5;
-                // 使用地板,天花板函数的原因在于: 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.timer = undefined;
-                    _this.container.scrollLeft = target;
-                    console.log('进入销毁程序', _this.container.scrollLeft, target);
-                }
-            }, 10);
-        };
+    _this.animate = function () {
+      var onSel = _this.props.onSel;
 
-        _this.itemWidth = window.screen.width;
-        _this.interval = props.interval || parseInt(_this.itemWidth / 3);
-        _this.index = props.index || 0;
-        return _this;
-    }
-
-    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)
+      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);
     };
 
-    TabContainer.prototype.componentWillUnmount = function componentWillUnmount() {
-        this.container.removeEventListener('touchstart', this.slideStart);
-        this.container.removeEventListener('touchmove', this.slideMove);
-        this.container.removeEventListener('touchend', this.slideEnd);
-    };
-    // 触摸开始
+    _this.itemWidth = window.screen.width;
+    _this.interval = props.interval || parseInt(_this.itemWidth / 4);
+    _this.index = props.index || 0;
+    _this.oldIndex = props.index || 0;
+    return _this;
+  }
 
-    // 移动中
+  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);
+  };
 
-    // 触摸结束
+  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);
+  };
+  // 触摸开始
 
-    // 判断用户是查看上一页还是下一页, 并设置回弹效果
+  // 移动中
 
-    // 这是一个缓动动画, 由快到慢
 
+  // 触摸结束
 
-    // 针对 ios 侧边滑出做出的限制
-    TabContainer.prototype.quiescingTouch = function 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 {
-            console.log('我应该进入这个');
-            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';
-            }
-        }
-    };
+  // 针对 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() {
-        var _this2 = this;
+  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';
+    }
+  };
 
-        return _react2.default.createElement(
-            'div',
-            { className: 'tab-container-root', ref: function ref(node) {
-                    _this2.container = node;
-                } },
-            _react2.default.createElement(
-                'ul',
-                { className: 'tab-container', ref: function ref(node) {
-                        _this2.wrap = node;
-                    } },
-                this.props.children
-            )
-        );
-    };
+  TabContainer.prototype.render = function render() {
+    var _this2 = this;
 
-    return TabContainer;
+    return _react2.default.createElement(
+      'div',
+      { className: 'tab-container-root', ref: function ref(node) {
+          _this2.container = node;
+        } },
+      _react2.default.createElement(
+        'ul',
+        { className: 'tab-container', ref: function ref(node) {
+            _this2.wrap = node;
+          } },
+        this.props.children
+      )
+    );
+  };
+
+  return TabContainer;
 }(_react.Component);
@@ -220,0 +248,0 @@

lib/TabContainerItem/TabContainerItem.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -20,2 +22,5 @@
 
+/* 
+    在 style 属性中传下 height 属性, 不传默认全屏高度
+*/
 var TabContainerItem = function (_Component) {
@@ -30,7 +35,2 @@ _inherits(TabContainerItem, _Component);
 
-  TabContainerItem.prototype.componentDidMount = function componentDidMount() {
-    // console.log(this.el)
-
-  };
-
   TabContainerItem.prototype.render = function render() {
@@ -40,9 +40,17 @@ var _this2 = this;
     // console.log(this.props)
-    var style = this.props.style;
+    var props = Object.assign({}, this.props);
+    var style = props.style;
 
+    // 默认高度为整屏高度
+
+    if (!style) {
+      style = { height: window.screen.height + 'px' };
+    } else if (!style.height) {
+      style.height = window.screen.height + 'px';
+    }
     return _react2.default.createElement(
       'li',
-      { className: 'TabContainerItem', style: style, ref: function ref(node) {
+      _extends({ className: 'TabContainerItem' }, props, { ref: function ref(node) {
           return _this2.el = node;
-        } },
+        } }),
       this.props.children
@@ -49,0 +57,0 @@ );

package.json

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

umd/bestnihon-react-components.js

@@ -99,8 +99,8 @@ /*!
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__TabContainer_TabContainer__ = __webpack_require__(3);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "TabContainer", function() { return __WEBPACK_IMPORTED_MODULE_0__TabContainer_TabContainer__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__TabContainerItem_TabContainerItem__ = __webpack_require__(5);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "TabContainerItem", function() { return __WEBPACK_IMPORTED_MODULE_1__TabContainerItem_TabContainerItem__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__NavBar_NavBar__ = __webpack_require__(7);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "NavBar", function() { return __WEBPACK_IMPORTED_MODULE_2__NavBar_NavBar__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__NavBar_NavBar__ = __webpack_require__(3);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "NavBar", function() { return __WEBPACK_IMPORTED_MODULE_0__NavBar_NavBar__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__TabContainer_TabContainer__ = __webpack_require__(5);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "TabContainer", function() { return __WEBPACK_IMPORTED_MODULE_1__TabContainer_TabContainer__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__TabContainerItem_TabContainerItem__ = __webpack_require__(7);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "TabContainerItem", function() { return __WEBPACK_IMPORTED_MODULE_2__TabContainerItem_TabContainerItem__["a"]; });
 
@@ -120,4 +120,4 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__TabContainer_css__ = __webpack_require__(4);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__TabContainer_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__TabContainer_css__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__NavBar_css__ = __webpack_require__(4);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__NavBar_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__NavBar_css__);
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -131,204 +131,99 @@
 
-var LEFT = 'left';
-var RIGHT = 'right';
-var TOP = 'top';
-var DOWN = 'down';
 
-/*
-    interval : 触发滚动间距
-    index : 默认 展示第几页
+/* NavBar 有两种情况 
+    1. bar 中无其他样式,bar 点击后 bar 的图标无变化,只是颜色字体变化
+    2. bar 中有其他样式, bar点击后 bar 的图标和颜色发生变化,所以需要有个 NavItem来配合
 */
+/* 定义: 
+    NavData:  数组  
+      eg: [{name: '首页', type: 1}, {name: '购物车', type: 2}]  类似于这样的
 
-var TabContainer = function (_Component) {
-    _inherits(TabContainer, _Component);
+    onSel: 回调函数
+      (item,index) => {console.log(item,index)} 
 
-    function TabContainer(props) {
-        _classCallCheck(this, TabContainer);
+    ind: 展示第几个 navbar, 默认第一个, 从零开始
 
-        var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+    TODO: 功能点==> 当 NavBar 与 TabContainer 搭配使用时, TabContainer 滑动, Nav的 Bar 也随着同步移动
+    translate: 通过 TabContianer 回调传过来的 移动值
+      实际的值应该根据 NavBar 的 length 来算, translate = translate / length, 应当为 1: length
+      
+*/
 
-        _this.slideStart = function (e) {
-            console.log(e.changedTouches[0].pageX);
-            _this.startX = e.changedTouches[0].pageX;
-            _this.startY = e.changedTouches[0].pageY;
-            _this.quiescingTouch();
-        };
+var NavBar = function (_Component) {
+  _inherits(NavBar, _Component);
 
-        _this.slideMove = function (e) {
-            var moveEndX = e.changedTouches[0].pageX;
-            var moveEndY = e.changedTouches[0].pageY;
-            var X = moveEndX - _this.startX;
-            var Y = moveEndY - _this.startY;
-            if (Math.abs(X) > Math.abs(Y) && X > 0) {
-                // right
-                console.log('向右', X, _this.container.scrollLeft);
-                _this.touchDes = RIGHT;
-                if (_this.index !== 0) {
-                    _this.container.scrollLeft = _this.index * _this.itemWidth - X;
-                }
-            } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
-                // left
-                console.log('向左', X, _this.container.scrollLeft);
-                _this.touchDes = LEFT;
-                if (_this.index !== _this.props.children.length - 1) {
-                    _this.container.scrollLeft = _this.index * _this.itemWidth - X;
-                }
-            } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
-                // down
-                console.log('向下');
-                _this.touchDes = DOWN;
-            } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
-                // up 
-                console.log('向上');
-                _this.touchDes = TOP;
-            } else {
-                //没有发生滑动 
-                console.log('没有发生滑动');
-            }
-        };
+  function NavBar(props) {
+    _classCallCheck(this, NavBar);
 
-        _this.slideEnd = function (e) {
-            _this.endX = e.changedTouches[0].clientX;
-            console.log('touch 结束');
-            if (!_this.timer) {
-                console.log('没有进行中 timer 进入 check');
-                _this.checkTouch();
-            }
-        };
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-        _this.checkTouch = function () {
-            if (_this.touchDes === RIGHT || _this.touchDes === LEFT) {
-                var distance = Math.abs(_this.endX - _this.startX);
-                var obj = {
-                    // 上一页
-                    'right': function right() {
-                        if (_this.index !== 0) {
-                            _this.index--;
-                        }
-                    },
-                    // 下一页
-                    'left': function left() {
-                        if (_this.index !== _this.props.children.length - 1) {
-                            _this.index++;
-                        }
-                    }
-                    // 滑动距离大于阀值  判断左右,跳转下一页 or 上一页
-                };if (distance >= _this.interval) {
-                    // 判断左右 跳转下一页
-                    obj[_this.touchDes]();
-                }
-                // this.animate()
-            }
-            //  问题来了 ? 为什么不在 左滑右滑中执行 animate 的原因
-            // 最开始 animate 执行的目的在于 上一页 下一页  回弹效果
-            // 现在无论是上下左右滑 都要执行的原因是: 有一种很不正常的操作, 当用户在左滑到一定限度之后,开始在原点上下滑动,这样我之前在左右滑中执行的逻辑就错了,
-            // 这样会造成页面停留在content1 和 content2 的中间滚动点,就很尴尬. 所以现在无论怎么滑 在touch 结束的时候 都执行一下
-            _this.animate();
-        };
+    _this.sel = function (item, index) {
+      var ind = _this.state.ind;
+      // 函数节流
 
-        _this.animate = function () {
-            var target = _this.itemWidth * _this.index;
-            console.log('目标的 scrollleft ==> ' + target);
-            _this.timer = setInterval(function () {
-                var step = (target - _this.container.scrollLeft) / 5;
-                // 使用地板,天花板函数的原因在于: 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.timer = undefined;
-                    _this.container.scrollLeft = target;
-                    console.log('进入销毁程序', _this.container.scrollLeft, target);
-                }
-            }, 10);
-        };
+      if (ind === index) return console.warn('函数节流,不可重复点击');
+      var onSel = _this.props.onSel;
 
-        _this.itemWidth = window.screen.width;
-        _this.interval = props.interval || parseInt(_this.itemWidth / 3);
-        _this.index = props.index || 0;
-        return _this;
-    }
-
-    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.setState({ ind: index });
+      onSel && onSel(item, index);
     };
 
-    TabContainer.prototype.componentWillUnmount = function componentWillUnmount() {
-        this.container.removeEventListener('touchstart', this.slideStart);
-        this.container.removeEventListener('touchmove', this.slideMove);
-        this.container.removeEventListener('touchend', this.slideEnd);
+    _this.state = {
+      ind: props.ind || 0,
+      translate: props.translateX
     };
-    // 触摸开始
+    return _this;
+  }
 
-    // 移动中
+  NavBar.prototype.render = function render() {
+    var _this2 = this;
 
-    // 触摸结束
+    var _state = this.state,
+        ind = _state.ind,
+        translate = _state.translate;
+    var _props = this.props,
+        NavData = _props.NavData,
+        children = _props.children;
 
-    // 判断用户是查看上一页还是下一页, 并设置回弹效果
-
-    // 这是一个缓动动画, 由快到慢
-
-
-    // 针对 ios 侧边滑出做出的限制
-    TabContainer.prototype.quiescingTouch = function 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 {
-            console.log('我应该进入这个');
-            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';
-            }
-        }
-    };
-
-    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() {
-        var _this2 = this;
-
+    var itemWidth = NavData ? 100 / NavData.length : 100 / children.length;
+    // 同步移动
+    this.bar && (this.bar.style.transform = 'translateX(' + translate + 'px)');
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      'div',
+      { className: 'NavBar-root' },
+      NavData ? NavData.map(function (item, index) {
         return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-            'div',
-            { className: 'tab-container-root', ref: function ref(node) {
-                    _this2.container = node;
-                } },
-            __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-                'ul',
-                { className: 'tab-container', ref: function ref(node) {
-                        _this2.wrap = node;
-                    } },
-                this.props.children
-            )
+          'span',
+          {
+            key: 'Nav' + index,
+            style: { width: itemWidth + '%' },
+            className: 'Nav-item',
+            onClick: function onClick() {
+              return _this2.sel(item, index);
+            } },
+          item.name
         );
-    };
+      }) : children.map(function (item, index) {
+        return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+          'span',
+          {
+            key: 'Nav' + index,
+            style: { width: itemWidth + '%' },
+            className: 'Nav-item',
+            onClick: function onClick() {
+              return _this2.sel(item, index);
+            } },
+          item
+        );
+      }),
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'Nav-active', style: { width: itemWidth + '%', left: ind * itemWidth + '%' }, ref: function ref(node) {
+          return _this2.bar = node;
+        } })
+    );
+  };
 
-    return TabContainer;
+  return NavBar;
 }(__WEBPACK_IMPORTED_MODULE_0_react__["Component"]);
 
-/* harmony default export */ __webpack_exports__["a"] = (TabContainer);
+/* harmony default export */ __webpack_exports__["a"] = (NavBar);
 
@@ -348,4 +243,4 @@ /***/ }),
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__TabContainerItem_css__ = __webpack_require__(6);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__TabContainerItem_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__TabContainerItem_css__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__TabContainer_css__ = __webpack_require__(6);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__TabContainer_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__TabContainer_css__);
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -359,36 +254,232 @@
 
+var LEFT = 'left';
+var RIGHT = 'right';
+var TOP = 'top';
+var DOWN = 'down';
 
-var TabContainerItem = function (_Component) {
-  _inherits(TabContainerItem, _Component);
+/*  接受参数: 
+      interval : 触发滚动间距  Number
+      index : 默认 展示第几页 Number
+      onSel: 回调函数  返回index  Function
+*/
+/* 
+  必须与 TabContainerItem 搭配使用
+    ex:   <TabContainer>
+            <TabContainerItem style={{ fontSize: '20px', backgroundColor: 'red' ,height: '500px'}}>
+            {arr.map(i => {
+                return <div key={i}>{i}</div>
+            })}
+            </TabContainerItem>
+            <TabContainerItem style={{ backgroundColor: 'yellow' }}>
+            {arr.map(i => {
+                return <div key={i}>{i}</div>
+            })}
+            </TabContainerItem>
+            <TabContainerItem style={{ backgroundColor: 'skyblue' }}>
+            {arr.map(i => {
+                return <div key={i}>{i}</div>
+            })}
+            </TabContainerItem>
+          </TabContainer>
 
-  function TabContainerItem() {
-    _classCallCheck(this, TabContainerItem);
+*/
 
-    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+var TabContainer = function (_Component) {
+  _inherits(TabContainer, _Component);
+
+  function TabContainer(props) {
+    _classCallCheck(this, TabContainer);
+
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+    _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()
+    };
+
+    _this.slideMove = function (e) {
+      var moveEndX = e.changedTouches[0].pageX;
+      var moveEndY = e.changedTouches[0].pageY;
+      var X = moveEndX - _this.startX;
+      var Y = moveEndY - _this.startY;
+
+      if (!_this.slideDirection || _this.slideDirection === RIGHT || _this.slideDirection === LEFT) {
+        if (Math.abs(X) > Math.abs(Y) && X > 0) {
+          // right
+          console.log('向右');
+          if (_this.index !== 0) {
+            var distance = _this.index * _this.itemWidth - X;
+            _this.container.scrollLeft = distance;
+          }
+          _this.slideDirection = RIGHT;
+        } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
+          // left
+          console.log(' 向左');
+          if (_this.index !== _this.props.children.length - 1) {
+            var _distance = _this.index * _this.itemWidth - X;
+            _this.container.scrollLeft = _distance;
+          }
+          _this.slideDirection = LEFT;
+        } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
+          // down
+          _this.slideDirection = DOWN;
+          console.log('向下');
+          _this.hideLi();
+        } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
+          // up 
+          _this.slideDirection = TOP;
+          console.log('向上');
+          _this.hideLi();
+        }
+      }
+    };
+
+    _this.slideEnd = function (e) {
+      _this.endX = e.changedTouches[0].clientX;
+      _this.checkTouch();
+      _this.slideDirection = null;
+    };
+
+    _this.checkTouch = function () {
+      if (_this.slideDirection === RIGHT || _this.slideDirection === LEFT) {
+        var distance = Math.abs(_this.endX - _this.startX);
+        var obj = {
+          // 上一页
+          'right': function right() {
+            if (_this.index !== 0) {
+              _this.index--;
+            }
+          },
+          // 下一页
+          'left': function left() {
+            if (_this.index !== _this.props.children.length - 1) {
+              _this.index++;
+            }
+          }
+          // 滑动距离大于阀值  判断左右,跳转下一页 or 上一页
+        };if (distance >= _this.interval) {
+          // 判断左右 跳转下一页
+          obj[_this.slideDirection]();
+        }
+        _this.animate();
+      } else {
+        _this.showLi();
+        _this.container.scrollLeft = _this.index * _this.itemWidth;
+      }
+    };
+
+    _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.index = props.index || 0;
+    _this.oldIndex = props.index || 0;
+    return _this;
   }
 
-  TabContainerItem.prototype.componentDidMount = function componentDidMount() {
-    // console.log(this.el)
+  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);
+  };
 
+  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);
   };
+  // 触摸开始
 
-  TabContainerItem.prototype.render = function render() {
+  // 移动中
+
+
+  // 触摸结束
+
+  // 判断用户是查看上一页还是下一页, 并设置回弹效果
+
+  // 缓动动画, 由快到慢
+
+
+  // 针对 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() {
     var _this2 = this;
 
-    // console.log(this.props)
-    var style = this.props.style;
-
     return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-      'li',
-      { className: 'TabContainerItem', style: style, ref: function ref(node) {
-          return _this2.el = node;
+      'div',
+      { className: 'tab-container-root', ref: function ref(node) {
+          _this2.container = node;
         } },
-      this.props.children
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+        'ul',
+        { className: 'tab-container', ref: function ref(node) {
+            _this2.wrap = node;
+          } },
+        this.props.children
+      )
     );
   };
 
-  return TabContainerItem;
+  return TabContainer;
 }(__WEBPACK_IMPORTED_MODULE_0_react__["Component"]);
 
-/* harmony default export */ __webpack_exports__["a"] = (TabContainerItem);
+/* harmony default export */ __webpack_exports__["a"] = (TabContainer);
 
@@ -408,4 +499,6 @@ /***/ }),
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__NavBar_css__ = __webpack_require__(8);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__NavBar_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__NavBar_css__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__TabContainerItem_css__ = __webpack_require__(8);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__TabContainerItem_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__TabContainerItem_css__);
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -420,23 +513,42 @@
 
-var NavBar = function (_Component) {
-  _inherits(NavBar, _Component);
+/* 
+    在 style 属性中传下 height 属性, 不传默认全屏高度
+*/
 
-  function NavBar() {
-    _classCallCheck(this, NavBar);
+var TabContainerItem = function (_Component) {
+  _inherits(TabContainerItem, _Component);
 
+  function TabContainerItem() {
+    _classCallCheck(this, TabContainerItem);
+
     return _possibleConstructorReturn(this, _Component.apply(this, arguments));
   }
 
-  NavBar.prototype.render = function render() {
+  TabContainerItem.prototype.render = function render() {
+    var _this2 = this;
+
+    // console.log(this.props)
+    var props = Object.assign({}, this.props);
+    var style = props.style;
+
+    // 默认高度为整屏高度
+
+    if (!style) {
+      style = { height: window.screen.height + 'px' };
+    } else if (!style.height) {
+      style.height = window.screen.height + 'px';
+    }
     return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-      'div',
-      null,
-      '\u6D4B\u8BD5\u7528\u7684\u5BFC\u822A\u680F'
+      'li',
+      _extends({ className: 'TabContainerItem' }, props, { ref: function ref(node) {
+          return _this2.el = node;
+        } }),
+      this.props.children
     );
   };
 
-  return NavBar;
+  return TabContainerItem;
 }(__WEBPACK_IMPORTED_MODULE_0_react__["Component"]);
 
-/* harmony default export */ __webpack_exports__["a"] = (NavBar);
+/* harmony default export */ __webpack_exports__["a"] = (TabContainerItem);
 
@@ -443,0 +555,0 @@ /***/ }),

umd/bestnihon-react-components.min.js

@@ -5,3 +5,3 @@ /*!
  */
-!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(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},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 o=n(3);n.d(t,"TabContainer",function(){return o.a});var r=n(5);n.d(t,"TabContainerItem",function(){return r.a});var i=n(7);n.d(t,"NavBar",function(){return i.a})},function(e,t,n){"use strict";var o=n(0),r=n.n(o),i=n(4);n.n(i);var c="left",s="right",a="top",u="down",l=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 o=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 o.slideStart=function(e){console.log(e.changedTouches[0].pageX),o.startX=e.changedTouches[0].pageX,o.startY=e.changedTouches[0].pageY,o.quiescingTouch()},o.slideMove=function(e){var t=e.changedTouches[0].pageX,n=e.changedTouches[0].pageY,r=t-o.startX,i=n-o.startY;Math.abs(r)>Math.abs(i)&&r>0?(console.log("向右",r,o.container.scrollLeft),o.touchDes=s,0!==o.index&&(o.container.scrollLeft=o.index*o.itemWidth-r)):Math.abs(r)>Math.abs(i)&&r<0?(console.log("向左",r,o.container.scrollLeft),o.touchDes=c,o.index!==o.props.children.length-1&&(o.container.scrollLeft=o.index*o.itemWidth-r)):Math.abs(i)>Math.abs(r)&&i>0?(console.log("向下"),o.touchDes=u):Math.abs(i)>Math.abs(r)&&i<0?(console.log("向上"),o.touchDes=a):console.log("没有发生滑动")},o.slideEnd=function(e){o.endX=e.changedTouches[0].clientX,console.log("touch 结束"),o.timer||(console.log("没有进行中 timer 进入 check"),o.checkTouch())},o.checkTouch=function(){if(o.touchDes===s||o.touchDes===c){var e={right:function(){0!==o.index&&o.index--},left:function(){o.index!==o.props.children.length-1&&o.index++}};Math.abs(o.endX-o.startX)>=o.interval&&e[o.touchDes]()}o.animate()},o.animate=function(){var e=o.itemWidth*o.index;console.log("目标的 scrollleft ==> "+e),o.timer=setInterval(function(){var t=(e-o.container.scrollLeft)/5;t=t>0?Math.ceil(t):Math.floor(t),o.container.scrollLeft+=t,Math.abs(e-o.container.scrollLeft)<=Math.abs(t)&&(clearInterval(o.timer),o.timer=void 0,o.container.scrollLeft=e,console.log("进入销毁程序",o.container.scrollLeft,e))},10)},o.itemWidth=window.screen.width,o.interval=n.interval||parseInt(o.itemWidth/3),o.index=n.index||0,o}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)},t.prototype.componentWillUnmount=function(){this.container.removeEventListener("touchstart",this.slideStart),this.container.removeEventListener("touchmove",this.slideMove),this.container.removeEventListener("touchend",this.slideEnd)},t.prototype.quiescingTouch=function(){this.startX<30?(this.container.removeEventListener("touchmove",this.slideMove),this.container.removeEventListener("touchend",this.slideEnd),this.hideLi(),this.wrap.style.overflow="hidden"):(console.log("我应该进入这个"),this.showLi(),this.wrap.style.overflow="visible",this.container.addEventListener("touchmove",this.slideMove),this.container.addEventListener("touchend",this.slideEnd))},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 r.a.createElement("div",{className:"tab-container-root",ref:function(t){e.container=t}},r.a.createElement("ul",{className:"tab-container",ref:function(t){e.wrap=t}},this.props.children))},t}(o.Component);t.a=l},function(e,t){},function(e,t,n){"use strict";var o=n(0),r=n.n(o),i=n(6);n.n(i);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.componentDidMount=function(){},t.prototype.render=function(){var e=this,t=this.props.style;return r.a.createElement("li",{className:"TabContainerItem",style:t,ref:function(t){return e.el=t}},this.props.children)},t}(o.Component);t.a=c},function(e,t){},function(e,t,n){"use strict";var o=n(0),r=n.n(o),i=n(8);n.n(i);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(){return r.a.createElement("div",null,"测试用的导航栏")},t}(o.Component);t.a=c},function(e,t){}]).default});
+!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});
 //# sourceMappingURL=bestnihon-react-components.min.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136137

increased by93.59%

Number of package files

34

increased by54.55%

Lines of code

2500

increased by162.61%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes