angular RX实现无线滚屏懒加载

  //处理请求数据
    processData = res => {
    　　this.data.concat(res)
        console.info(res);
        this.currentPage++;
  
    }

    //判断用户是否向下滚动
    isUserScrollingDown = (positions) => {
        return positions[0].sT < positions[1].sT;
    };
    //判断是否滚动到某个值
    isScrollExpectedPercent = (position, percent) => {
        return ((position.sT + position.cH) / position.sH) > (percent / 100);
    }
    //监听滚动
    initScroll() {
        let scrollElem = $('.ui-picklist-list.ui-picklist-source');
        this.scrollEvent$ = Rx.Observable.fromEvent(scrollElem, 'scroll');
        this.userScrolledDown$ = this.scrollEvent$
            .map(e => ({
                sH: e.target.scrollHeight,
                sT: e.target.scrollTop,
                cH: e.target.clientHeight
            }))
            .pairwise()//传递两次监听参数
            .filter(positions => {
                return this.isUserScrollingDown(positions) && this.isScrollExpectedPercent(positions[1], 50)
            })

        this.requestOnScroll$ = this.userScrolledDown$
            .startWith([])
            .exhaustMap(() => this.getDetail())//等待上次请求完成

        this.requestOnScroll$.subscribe(this.processData);
    }

    getDetail(): Observable<any> {
        let url ='*******'return this.http.get(url+this.currentPage).map(res => res.json());
    }

 

　　遇到一个数据量特别大的接口，一次请求太耗时，决定用RX做滚屏处理

代码如下：有时间再补充