0

我正在cycle.js 中构建一个无限滚动器。我有一个 ajax 服务，每页返回 X 个结果。第一个请求的page id为0，但后续请求需要使用第一个结果集中返回的page id。结果放在dom中。当用户滚动到可见结果的底部时，会加载一个新集合并将其连接到列表中。我有一些有用的东西，但没有我想要的那么好。

缩短的版本如下所示：

const onScroll$ = sources.DOM.select('document').events('scroll')
    .map((e) => {
      return e.srcElement.scrollingElement.scrollTop;
    })
    .compose(debounce(1000));

  const onHeight$ = sources.DOM.select('#items').elements()
    .map((e) => {
      return e[0].scrollHeight;
    })

  const scroll$ = onScroll$.startWith(0);
  const height$ = onHeight$.startWith(0);

  const itemsXHR$ = sources.HTTP.select('items')
    .flatten();

  const id$ = itemsXHR$
    .map(res => res.body.data.content.listPageId)
    .take(2)
    .startWith(0);

  const getitems$ = xs.combine(scroll$,height$,id$)
    .map( ( [scrollHeight, contentHeight, sid, lp] ) => {
      if ( scrollHeight > (contentHeight - window.innerHeight - 1) ) {
        const ms = new Date().getTime();
        return {
           url: `data/${sid}?_dc=${ms}`,
          category: 'items',
          method: 'GET'
        };
      }
      return {};
    });

  const items$ = itemsXHR$
    .fold( (acc=[],t) => [...acc, ...t.body.data.content.items] ) 
    .startWith(null);

  const vdom$ = items$.map(items =>
    div('#items', [
      ul('.search-results', items==null ? [] : items.map(data =>
        li('.search-result', [
          a({attrs: {href: `/${data.id}`}}, [
            img({attrs: {src: data.url}})
          ])
        ])
      ))
    ])
  );

主要问题是 ajax 请求与滚动位置相关联，并且可能在滚动期间触发多个请求。

作为我去抖滚动的那一刻，但它在这里并不理想。

关于如何编排流以便在需要时仅发送 1 个请求（当用户靠近页面底部时）的任何想法？

我虽然可能每页有一个唯一的 id 并在 getitem$ 上使用 .dropRepeats？我在结果中没有唯一的页面 id。

4

1 回答 1

0

您可以过滤 scroll$ 以仅占用页面底部。

const onScroll$ = sources.DOM.select('document').events('scroll')
.map((e) => {
  return e.srcElement.scrollingElement.scrollTop;
})
.filter( /* filter by checking scrollTop is near bottom */ )
.compose(debounce(1000));
于 2016-11-23T02:33:36.380 回答