上拉加载更多工具插件

scrollLoadMore.js文件

const scrollLoadMore = {
    directon: 0,
    loadOrFresh:null,//0表示需要刷新，1表示需要加载更多
    contianer:null,
    bottomOrTop(){
        let _this=this;

        let dataHeight = this.contianer.clientHeight;
        let scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
        let screenHeight = document.documentElement.clientHeight;
        let h = 0;
        if (_this.directon === 1 && (dataHeight - scrollHeight - h < screenHeight)) {
            // console.log("down bottom")
            this.loadOrFresh=1;
        }else if (_this.directon === 2&&scrollHeight===0) {
            // console.log("up top",_this.getScrollTop())
            this.loadOrFresh=0;
        }else {
            this.loadOrFresh=null;
        }

        /*if (_this.directon===1&&_this.getScrollTop() + _this.getClientHeight() == _this.getScrollHeight()) {
            console.log("down bottom");
            this.loadOrFresh=1;
        }
        if(_this.directon===2&&_this.getScrollTop()===0){
            console.log("up top",_this.getScrollTop())
            this.loadOrFresh=0;
        }*/
    },

    //获取滚动条当前的位置
    getScrollTop() {
        let scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        }
        else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    },

    //获取当前可视范围的高度
    getClientHeight() {
        let clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
        }
        else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        }
        return clientHeight;
    },
    //获取文档完整的高度
    getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    },

    //根据接触和离开判断方向 1向上 2向下 3向左 4向右 0未发生滑动
    getDirection(startx, starty, endx, endy) {
        let angx = endx - startx;
        let angy = endy - starty;
        let result = 0;

        //如果滑动距离太短
        if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
            return result;
        }
        let angle = this.getAngle(angx, angy);
        if (angle >= -135 && angle <= -45) {
            result = 1;
        } else if (angle > 45 && angle < 135) {
            result = 2;
        } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
            result = 3;
        } else if (angle >= -45 && angle <= 45) {
            result = 4;
        }

        return result;
    },
    //触摸点和离开点连线与x轴角度
    getAngle(angx, angy) {
        return Math.atan2(angy, angx) * 180 / Math.PI;
    },
    //接触屏幕
    onTouchStart(e) {
        // console.log("touch start ")
        // 记录触摸起始点的位置
        this.startx = e.touches[0].pageX;
        this.starty = e.touches[0].pageY;
    },
    //离开屏幕
    onTouchEnd(e) {
        // 记录触摸结束点的位置
        let endx, endy;
        endx = e.changedTouches[0].pageX;
        endy = e.changedTouches[0].pageY;
        // 记录滑动的方向
        let direction = this.getDirection(this.startx, this.starty, endx, endy);
        switch (direction) {
            case 0:
                // console.log("未滑动！");
                break;
            case 1:
                // console.log("向上！");
                this.directon = direction;
                return this.bottomOrTop();
                break;
            case 2:
                // console.log("向下！");
                this.directon = direction;
                return this.bottomOrTop();
                break;
            case 3:
                // console.log("向左！");
                break;
            case 4:
                // console.log("向右！");
                break;
            default:
        }
    }
};
export default scrollLoadMore;

使用方法：

1、导入：

import ScrollLoadMore from "utils/scrollLoadMore"

2、绑定touchStart方法和touchEnd方法

<div ref="list" onTouchStart={::this.touchStart} onTouchEnd={::this.touchEnd}>
    <TemplateList {...params} onClickDetail={this.onClickDetail}/>
</div>

3、在touchStart方法和touchEnd方法中使用插件

touchStart(e) {
    ScrollLoadMore.onTouchStart(e);
}

touchEnd(e) {
    ScrollLoadMore.contianer = this.refs.list;
    ScrollLoadMore.onTouchEnd(e);
    if (!this.state.isEnd && ScrollLoadMore.loadOrFresh === 1) {
        this.setState({isLoading: true});
        let {activityActs} = this.props;
        let params = {
            page_index: this.pageIndex,
            page_size: this.pageSize += this.count,
            year: this.state.year,
            month: this.state.month,
            execute: false,
            finished: true,
        }
        activityActs.reset();
        activityActs.getActivityPlanList(params).then(data => {
            if (data.data.code === 10000) {
                let isEnd = this.state.isEnd;
                if (data.data.data.list.length >= data.data.data.total) {
                    isEnd = true;
                }
                this.setState({isEnd: isEnd, isLoading: false})
            }
        });
    }

}