vue监听下滑加载（移动端）

 

 

data(){        
        return {
            current_page:1,//默认第一页
            isAll:false,//判断是否加载完
            showSearchFlag: false,//判断是上滑还是下滑
            list:[],
        }
    },

created(){
        var startY = 0;
        let that = this;
        document.addEventListener("touchstart",function(e){
            startY = e.changedTouches[0].pageY;
        },false);
        document.addEventListener("touchend",function(e){//在触摸过后执行
            var endY = e.changedTouches[0].pageY;
            var changeVal = endY - startY;
            if(endY < startY){//向上滑
            //    console.log("向上滑");
                that.showSearchFlag = false
            }else if(endY > startY){//向下滑
            //    console.log("向下滑");
                that.showSearchFlag = true
            }else{
                console.log("没有偏移");
            }
            // 获取屏幕高度
            var a = document.body.scrollTop || document.documentElement.scrollTop;;  //滚动条的高度
            var b =document.documentElement.clientHeight    //可视区的高度
            var c = $('.classesContainer').height();   //文档的总高度
        
            if(a+b >= c){
                //表示浏览器已经到达最底部
                //console.log('最底部');
                that.showSearchFlag = true;
                if (that.isAll == false) {//判断是否加载完，false没加载完继续执行下面的方法
                    that.getSwiperData();
                }
            }
        },false);
        this.getSwiperData();//进入页面先执行此方法（该方法是自己写的方法）
    },

methods:{
        getSwiperData(search){
            this.$ajax({
                method: 'post',
                url: '自己要请求的接口',
                data:{},
                headers:{
                    'token':window.localStorage['token'],
                    'type':'APP',
                }
            }).
            then(response => {
                var data = response.data;
                if(response.data.code == 200){ //正确拿到数据
                    if (this.current_page <= 接口返回的最后一页（数字）) {//如果当前页数不大于最后一页就执行下面的代码
                        this.list = this.list.concat(data.data.data);//拼接
                        this.current_page++;//页数加一
                        this.isAll = false;
                    } else {//加载完了
                        this.isAll = true;
                    }
                }
            })
        },

}