• 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做滚屏处理

    代码如下:有时间再补充

  • 相关阅读:
    基本排序
    mysql安装
    函数和方法
    COOKIE 与 SESSION
    django---入门
    django模板继承
    2017-11-14
    Django---模板层(template)
    Dajngo---model基础
    Django--基础篇
  • 原文地址:https://www.cnblogs.com/nanguabushuohua/p/9178972.html
Copyright © 2020-2023  润新知