用rxjs实现无限滚动

Question

I'm having trouble when implement infinite scroll with rxjs

I have tried following snippet

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
}

How to pass the lastid to each request without the global variable 'lastid'?

Thanks

Answer 1

haven't test the code but you can try the below code snippet. The technique here is to start off with a state that contains your list and lastId then use expand to keep the stream going and listen for scroll

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))