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, //是否允許觸發觸底事件