用 rxjs 实现无限滚动答案

【问题标题】：implement infinite scroll with rxjs用 rxjs 实现无限滚动
【发布时间】：2019-07-08 08:39:21
【问题描述】：

使用 rxjs 实现无限滚动时遇到问题

我试过跟着sn-p

var lastid = null
fromEvent(window, 'scroll')
  .pipe(
    filter(() => isAtPageBottom()),
    exhaustMap(() => from(this.getList(lastid))),
    takeWhile(list => list.length !== 0),
    scan((cur, list) => [...cur, ...list], [])
  )
  .subscribe(list => {
    this.setState({list: list})
  })

async function getList (lastid) {
  const list = await request('/api/list?lastid=' + lastid)
  listid = list[list.length-1].id
  return list
}

如何在没有全局变量'lastid'的情况下将lastid传递给每个请求？

谢谢

【问题讨论】：

看看mergeScan
我是 rxjs 的新手。你能给我举个例子吗？ mergeScan(acc => {return from(getList(acc && acc[acc.length-1].id))}, null) 有效，但我不知道如何将它与排气映射一起使用。 @马丁

标签： javascript rxjs

【解决方案1】：

尚未测试代码，但您可以尝试以下代码 sn-p。这里的技术是从包含list 和lastId 的状态开始，然后使用expand 保持流继续并监听滚动

of({ list: [], lastId: null }).pipe(
    expand((obj) => {
        return fromEvent(window, 'scroll')
            .pipe(
                filter(() => isAtPageBottom()),
                exhaustMap(() => from(this.getList(obj.lastid))),
                map(res => ({ list: obj.list.concat(res), lastId: res[res.length - 1].id }))
            )
    }),
    takeWhile(({ list }) => list.length !== 0))

【讨论】：