uniapp中，解决横向滚动误触触底加载的两种方法(监听滚动scroll与监听触摸touch）

前言

uniapp开发移动端时，原设计是在一定高度的容器中(可纵向滚动，可横向滚动)，实现触底滚动加载数据。虽然实现了触底加载，但当横向滚动滚动条时，同样也会触发触底滚动加载，这种情况是需要规避的。当然这与触发时的条件设置有关。那么该如何设置，从而解决横向滚动时的误触呢？这里提供两种方法思路：监听滚动scroll和监听触摸touch。

解决横向滚动误触触底加载的分析

此时的场景是触底滚动加载已经可以正常使用，但横向滚动滚动条会触发触底加载。下面会提供两种解决方法，无论哪一种，总体的思路都是一样的：判断为纵向滚动滚动条，触底时，才会触发数据加载。

一、监听滚动scroll

• 解决思路：原来利用scroll-view组件的@scroll监听滚动的方法不变，在此基础上，在滚动触发页页码更新的条件上逻辑与判定为纵向滚动(纵向的滚动距离大于横向滚动距离的绝对值，这里取绝对值的原因：横向滚动时左右滚动都不应触发触底加载，避免左滚时scrollYFlage为true)
• 实现方法如下

    //关键条件，判定为纵向向下滚动
    let scrollYFlage=e.target.scrollTop-this.oldtop>Math.abs(e.target.scrollLeft-this.oldleft);
    
    //完整改变页码代码：滚动防抖，滚动触底，
    scroll(e){
        //dataLoadTip 是否继续加载数据
        if(this.dataLoadTip){
            if(this.timer){
                clearTimeout(this.timer)
            }
            let addPageFlage=e.target.scrollTop-this.oldtop>Math.abs(e.target.scrollLeft-this.oldleft);
            this.timer=setTimeout(()=>{
                if((e.target.scrollHeight-e.target.scrollTop-(this.tableMaxHeight/2)<=80) && addPageFlage){
                    this.changePage++;
                    //传递改变后的页码
                    this.$emit("sendPage",this.changePage)
                }
            },100)
        }else{
            // 初始化页码
            this.changePage=1;
            // 页面数据完毕后，初始化
            this.oldtop=0;
            this.oldleft=0;
	}
        this.oldtop=e.target.scrollTop;
	this.oldleft=e.target.scrollLeft;

二、监听触摸touch

• 解决思路：判定纵向滑动，在@touchStart监听开始触摸的方法中，记录开始触摸的点位，在@touchEnd监听结束触摸的方法中，记录结束触摸的点位，并计算点位的距离差以判断是纵向滑动还是横向滑动。斜滑时，当纵向的距离差大于横向的距离差时，认为是纵向滑动。
• 实现代码如下：

//开始触摸，记录点位
touchStart(e) {   
                this.touchStartX = e.touches[0].clientX;  
                this.touchStartY = e.touches[0].clientY;  
            }, 

//结束触摸，记录点位
 touchEnd(e) {  

                let deltaX = e.changedTouches[0].clientX - this.touchStartX;  
                let deltaY = e.changedTouches[0].clientY - this.touchStartY;  
                if(Math.abs(deltaX) < Math.abs(deltaY)) {  
                    if (deltaY < 0) {  
                        //console.log("上滑");
                        //这里判定为纵向的上滑后，做一些操作，配合滚动做出触底加载
                    }
                } 
            },            

记录完毕。