js常用方法-列表滚动加载数据

 

vue项目中没有使用element UI组件的滚动方式；

利用原生的滚动方法进行滚动加载数据，数据加载到最后无数据时停止滚动加载；

实现效果：

初始化个区块列表（发送请求数据列表）显示已加载完毕，滚动触底发送请求显示加载中，请求完成后显示已加载完毕；

// 各工单列表滚动分页、在mounted钩子函数中调用
scrollAll () {
    let that = this
    $('.workOrderPage #scrollWordOrder').off('scroll').on('scroll', function () {
        let thats = this;
        let no = +$(this).attr('data-no');
        let scrollTop = $(this).scrollTop();
        let height = $(this).height(); // 可视区域高度
        let scrollHeight = $(this)[0].scrollHeight;
        let heightAll = scrollTop + height;
        if (heightAll > scrollHeight) {
            that.scrollGetWordOrder(no);
        } else if (scrollHeight - heightAll < 1) {
            that.scrollGetWordOrder(no);
        }
    })
},