JS 移动端上拉加载、下拉刷新

记录一下。
 

let this_ = this;
        //上拉加载
        document.getElementById("news_list").addEventListener('scroll', (e) => {
            //console.log(e);
            let wScrollY = document.getElementById("news_list").scrollTop; // 当前滚动条位置
            let wInnerH = document.getElementById("news_list").offsetHeight; // 获取滚动元素的可见高度（不会变）
            let bScrollH = document.getElementById("news_list").scrollHeight; // 滚动条总高度
            //console.info(wScrollY+" - "+wInnerH+" - "+bScrollH);
            if (wScrollY + wInnerH >= bScrollH) {
                $(".periodNews").hide();
                $(".loadMore").show();
                /*
                    调用刷新函数
                    this_.findNews("", "up", "");
                */
                
                //演示效果延迟1秒结束，实际中可注释掉
                window.setTimeout(function () {
                    $(".loadMore").hide();
                    $(".periodNews").show();
                }, 1000)
            }
        }, true);
        let startY = 0;
        let endY = 0;
        //下拉刷新
        $(".newsListDiv").on({
            touchmove: function (event) {//触摸滑动事件
                //console.info(event);
                let touch = event.targetTouches[0];
                //endX = touch.pageX;
                endY = touch.pageY;
                if (startY == 0) {//赋第一次值
                    startY = endY;
                }
                let wScrollY = document.getElementById("news_list").scrollTop; // 当前滚动条位置
                if (wScrollY == 0 && (endY - startY) > 2) {//如果滚动条位置为0，且触摸位置移动了两个像素点，则认为开始下拉
                    //console.info("开始下拉");
                    $(".loadMoreTop").show();//显示下拉刷新区域
                    $(".refresh").show();//显示‘下拉刷新’文字
                    let height = endY - startY;//获取移动像素点
                    if (height > 92) {//下拉刷新区域最大高度
                        $(".refresh").hide();//隐藏‘下拉刷新’文字
                        $(".refreshWait").show();//显示‘松开刷新’文字
                        height = 92;
                    }
                    //$(".loadMoreTop").stop();
                    $(".loadMoreTop").animate({height: height + "px"}, 0);//动画
                }

            },
            touchend: function () {//触摸结束事件
                if ((endY - startY) > 90) {//如果触摸距离大于50像素点，则执行刷新
                    $(".refreshWait").hide();
                    //$(".refresh").hide();
                    $(".refreshing").show();
                    /*
                        调用刷新函数
                        this_.findNews("", "down", "");
                    */
                
                    //演示效果延迟1秒结束，实际中可注释掉
                    window.setTimeout(function(){
                     $(".loadMoreTop").animate({height:"0px"},50);//回归动画
                     $(".refreshing").hide();
                     $(".refresh").show();
                    },1000)
                } else {
                    $(".loadMoreTop").animate({height: "0px"}, 50);
                }
                startY = 0;
                endY = 0;
            }
        });

    //查询新闻
    async findNews(type, refreshType?, title?) {
        if (!type || type == "最新") {
            type = '';
        }
        if (!refreshType || refreshType == "down") {//下拉
            this.pageStart = 0;
            this.pageEnd = 10;
        } else if (refreshType == "up") {//上拉
            this.pageStart = this.pageEnd;
            this.pageEnd += 10;
        }
        //参数
        let data = {
            type: type,
            n: this.pageStart,
            m: this.pageEnd,
            title: title || ''
        }
        let url = "";

        const result = await this.http.ajax(url, data);
        //如果是上拉加载则追加数组
        if (refreshType && refreshType == "up") {
            this.news = this.news.concat(result);
        } else {
            this.news = result;
        }
        if (refreshType) {
            if (refreshType == "down") {//下拉
                $(".loadMoreTop").animate({height: "0px"}, 50);//回归动画
                $(".refreshing").hide();
                $(".refresh").show();
            } else {//上拉
                $(".loadMore").hide();
                $(".periodNews").show();
            }
        }

    }

<div style="height: calc(100% - 165px)!important;position: fixed;width: 100%;" class="newsListDiv">
    <div  class="news_list" id="news_list">
        <div  class="loadMoreTop">
            <div class="refresh">下拉刷新</div>
            <div class="refreshWait">松开刷新</div>
            <div class="refreshing">正在刷新...</div>
        </div >
        <div >
            <div class="loadMore">正在加载更多...</div>
            <div class="periodNews">没有更多新闻啦_(:з」∠)_</div>
        </div >
    </div >
</div>

 

大概就酱紫了。