H5页面上拉加载更多功能实现

首先定义获取页面当前的滚动高度方法：

  //滚动条在Y轴上的滚动距离
        getScrollTop() {
            var documentScrollTop = 0;
            documentScrollTop = document.documentElement.scrollTop;
            return documentScrollTop;
        },
        //文档的总高度
        getScrollHeight() {
            var documentScrollHeight = 0;
            documentScrollHeight = document.documentElement.scrollHeight;
            return documentScrollHeight;
        },
        //浏览器视口的高度
        getWindowHeight() {
            var windowHeight = 0;
            windowHeight = document.documentElement.clientHeight;
            return windowHeight;
        },

其次对当前页面的滚动高度进行计算：

 // 锚点定位
        initHeight() {
            // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop > (this.$refs.product_detail_recommend.offsetTop - 60) && this.recommend.length > 0){
                this.tabIndex = 3;
            }else 
            if(scrollTop > (this.$refs.product_detail_html.offsetTop - 60)){
                this.tabIndex = 2;
            }else if(scrollTop > (this.$refs.product_detail_eval.offsetTop - 60)){
                this.tabIndex = 1;
            }else{
                this.tabIndex = 0
            }
            // 头部导航背景色渐变
            if (scrollTop > 80) {
                let opacity = scrollTop / 140
                opacity = opacity > 1 ? 1 : opacity
                this.showFixedOpacity = { opacity }
                this.showFixed = false
            } else {
                this.showFixed = true
            }
            //如果被卷曲的高度大于吸顶元素到顶端位置 的距离
            // this.isFixed = scrollTop > this.offsetTop ? true : false;
            if(this.isScroll){
                let scroll =
                this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
                if (scroll > -1) {    //距离底部多少像素开始触发
                    this.loadMoreEvaData();
                }
            }
        },

定义滚动加载的方法：

//下拉加载
        loadMoreEvaData(){
            this.pageNum ++ ;
            if(this.pageNum >= this.totalPage ){
                this.isScroll = false
            }else{
                this.getRecommendData();
            }
        },

数据请求的方法定义：

  // 推荐列表
        getRecommendData(){
            this.$http.get(urlList.getRecommends,{params:{
                productId: this.productId,
                locationType: 0,
                pageNum: this.pageNum
            }}).then(res=>{
                if(res.data.code == 200){
                    var res = res.data.data;
                    this.totalPage = res.totalPage;
                    if(this.totalPage == 0){
                        this.isScroll = false
                    }
                    this.recommend = this.recommend.concat(res.recommend);
                }
            })
        },

在生命周期里调用滚动监听并对滚动监听进行解绑：

   mounted() {
        this.getRecommendData();
        window.addEventListener('scroll', this.initHeight);
    },
    //离开删除绑定事件
    beforeDestroy() {
        document.body.style.overflow = 'scroll'
        document.removeEventListener('touchmove', preD, {passive: false})
        window.removeEventListener("scroll",this.initHeight)
    },

写在最后不要忘记在data里面定义 允许触底条件，否则滚动监听无效

isScroll:true, //是否允许触发触底事件