记一次多Tab页面开发

采用社区通用的解决方案

页面看似很简单，其实需要支持以下特性：

1. 左右滑动切换多Tab，Tab切换有动画显示
2. 上拉加载更多、下拉刷新
3. Tab项可配置

为了加快开发进度，多Tab支持采用React Component的rmc-tabs，上拉加载更多、下拉刷新使用react-pullLoad这两大社区采用比较广泛的组件来搭建。

使用下来也发现一些问题：

1. rmc-tabs由于使用了rc-gusture库来控制左右滑动，其操作过于灵敏，导致上下滑动时也很容易出现切换Tab的行为。
   由于rmc-tabs并没有支持灵敏度配置，最后只好修改源码并且推送到Tencent自带的npm镜像（请不要这样做）。

2. react-pullload这个库虽然能够实现功能，但是动画感觉不是很细致。以后可以试下better-scroll库，试用过demo之后感觉触底回弹的动画简直太舒服。

滑动锁

由于页面涉及上下左右四个方向的滑动，需要设置滑动锁，即上下滑动时，不能触发左右滑动的事件，左右滑动同理。

代码如下，思路主要是通过监听touchstart，touchmove，touchend三个事件。记录25ms内的滑动方向并设置为此次滑动的总方向，忽略其他方向的滑动。

const touchElement = {};
        let deltaX,
            deltaY,
            lock = false;
        document.body.addEventListener('touchstart', function (e) {
            touchElement.startX = e.touches[0].clientX;
            touchElement.startY = e.touches[0].clientY;
            lock = false;
        }, { passive: false });
        document.body.addEventListener('touchmove', function (e) {
            if (lock) {
                e.preventDefault();
            }
            if (!deltaX) {
                deltaX = e.touches[0].clientX - touchElement.startX;
            }
            if (!deltaY) {
                deltaY = e.touches[0].clientY - touchElement.startY;
            }
            if (Math.abs(deltaY) < Math.abs(deltaX)) {
                lock = true;
            }
        }, { passive: false });
        document.body.addEventListener('touchend', function () {
            lock = false;
            deltaX = null;
            deltaY = null;
        }, { passive: false });

iOS下overflow:scroll,滑动没有惯性

iOS下, 只有body的overflow:auto有滑动惯性效果,

其他地方需要添加

-webkit-overflow-scrolling : touch;