摘要：光判斷滑到最底部是不夠的，首先需要知道用戶現(xiàn)在的操作，是點(diǎn)擊還是滑動(dòng)向上向下向左向右這里受到了原生判斷手指滑動(dòng)方向的啟發(fā)。最近想找圖片縮放的插件，感覺(jué)也跟觸摸事件有關(guān)，可以研究一下。

我最開(kāi)始糾結(jié)當(dāng)用戶滑動(dòng)時(shí)onTouchMove事件會(huì)不停的執(zhí)行去調(diào)接口，于是我僥幸的想只用onTouchEnd事件去判
斷用戶是否滑到最底部，但是這種方法應(yīng)用到項(xiàng)目中才發(fā)現(xiàn)點(diǎn)擊的時(shí)候也會(huì)觸發(fā)onTouchEnd，實(shí)際應(yīng)用并不理想。

光判斷滑到最底部是不夠的，首先需要知道用戶現(xiàn)在的操作，是點(diǎn)擊還是滑動(dòng)（向上、向下、向左、向右）,這里
受到了[原生js判斷手指滑動(dòng)方向][1]的啟發(fā)。

class demo Component {
     constructor(props) {
        super(props);
        this.state = {
            finished: false,//是否全部加載完畢
            isFoot: true,   //阻止用戶頻繁上拉調(diào)接口
        }
        this._page = 1;              //分頁(yè)頁(yè)碼                           
        this.val = "";               //搜索框的值
        this._page_size = 5;         //每頁(yè)顯示個(gè)數(shù) 
        this.startx;                 //觸摸起始點(diǎn)x軸坐標(biāo)
        this.starty;                 //觸摸起始點(diǎn)y軸坐標(biāo) 
    }
    //接觸屏幕
    touchStart(e) {
        this.startx = e.touches[0].pageX;
        this.starty = e.touches[0].pageY;
    }
    //離開(kāi)屏幕（[e.changedTouches][2]）
    touchEnd(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("未滑動(dòng)！");
                break;
            case 1:
                console.log("向上！");
                this.loadData();
                break;
            case 2:
                console.log("向下！");
                break;
            case 3:
                console.log("向左！");
                break;
            case 4:
                console.log("向右！");
                break;
            default:
        }
    }
    //觸摸點(diǎn)和離開(kāi)點(diǎn)連線與[x軸角度][3]
    getAngle(angx,angy) {
        return Math.atan2(angy, angx) * 180 / Math.PI;
    }
    //根據(jù)接觸和離開(kāi)判斷方向 1向上 2向下 3向左 4向右 0未發(fā)生滑動(dòng)（[Math.abs][4]）
    getDirection(startx, starty, endx, endy) {
        let angx = endx - startx;
        let angy = endy - starty;
        let result = 0;

         //如果滑動(dòng)距離太短
         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;
    }
    //**向上滑動(dòng)時(shí)（在這里才真正的判斷是否到最底部）**
    loadData() {
        console.log("數(shù)據(jù)的高-------------------------", this.refs.onPullUp.clientHeight);
        console.log("滾動(dòng)的高------------------------", document.documentElement.scrollTop);
        console.log("滾動(dòng)的高------------------------", document.body.scrollTop);
        console.log("屏幕的高------------------------", document.documentElement.clientHeight);
        let { meActs } = this.props;
        let dataHeight = this.refs.onPullUp.clientHeight;
        let scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
        let screenHeight = document.documentElement.clientHeight;
        const h = 10;//自定義距離底部多少時(shí)concat數(shù)據(jù)
        if (dataHeight - scrollHeight - h < screenHeight && this.state.isFoot) {
            this.setState({
                isFoot: false,
            });
            console.log("應(yīng)該只顯示1次");
            let params = {
                value: this.val,
                page_index: this._page,
                page_size: this._page_size,
            }
            meActs.getRecentReadList(this.accessKey, this.accessID, params).then((res) => {
                if (res.data.code === 10000 && res.data.data.list.length > 0) {
                    this.setState({
                        isFoot: true,
                    });
                    this._page++;
                }
                //數(shù)據(jù)加載完畢
                if (res.data.code === 10000 && res.data.data.list.length == 0) {
                    this.setState({
                        finished: true,
                    })
                }
            });
        }
    }
    
    render() {
        return(
             

                
                
                

                    {listItems}
                
                

                    {
                        this.state.finished ? 我是有底線的 :
                            recentReadList.list.length > 0 ? this.state.isFoot ? 上拉加載更多 :  :
                                暫無(wú)信息
                    }
                
            
        )
    }
}

微信端ios 安卓暫時(shí)還未發(fā)現(xiàn)任何異常（已上線的項(xiàng)目） 

移動(dòng)端觸摸事件的用處遠(yuǎn)不止如此，這次是因?yàn)閍ntd自帶的上拉加載插件在自身項(xiàng)目中應(yīng)用太復(fù)雜所以決定自己
寫(xiě)一個(gè)滿足自身項(xiàng)目需求的代碼少兼容性還看得過(guò)去的就行。最近想找react圖片縮放的插件，感覺(jué)也跟觸摸事件
有關(guān)，可以研究一下。

**