Infinite scroll

[kof]

It seems like only the initial fill is supported. The logic for dataFiller function is not wrapped into react-suitable way. So that as a user I could return a virtual dom.

[schovi]

@kof Thanks for noticing. I will think about how to transform that into react way

[geminiyellow]

that means react-iscroll not support infinite scroll yet?

[schovi]

@geminiyellow Definitely not now. It works with raw html inside, which is not React way.

[schovi]

Solution for now is to mix it with another library like https://github.com/alexcurtis/react-infscroll

[geminiyellow]

thank you @schovi . infinite scroll in redux is so hard.

[schovi]

@geminiyellow I am working on solution. It will take some time, but there is first API for that. it combine auto loading and infinite scrolling (rendering really long list)
https://github.com/schovi/react-iscroll/blob/feature/infinite/example/examples/infinite.jsx

1. new option infinite for setting up auto loading behaviour https://github.com/schovi/react-iscroll/blob/feature/infinite/example/examples/infinite.jsx#L10
2. new event onLoadMore which is triggered when you reach end of scroll https://github.com/schovi/react-iscroll/blob/feature/infinite/example/examples/infinite.jsx#L74
3. new component IScrollList which handle rendering of list items. I guess it could be used for every usage and not only infinite scrolling. It can still contain lot of optimalization for rendering. https://github.com/schovi/react-iscroll/blob/feature/infinite/example/examples/infinite.jsx#L76

Any suggestions, improvements or more features?

[schovi]

What about leave core IScroll component alone and whole this infinite/list functionality leave on this new component?

[geminiyellow]

hi @schovi ,
thanks for your great work.

leave core IScroll component alone

yes, please keep the IScroll interface same with the official, let it alone. you can describe your project like this, based on iscroll but more powerful. LOL.

Any suggestions

ok, i think {this.state.list} is duplicate with this two line.

how about change the interface like react-virtualized, High-Order Components, this way, you can do more things.

or more features?

of cause, pull to refresh , other side of the infinite.

[schovi]

@geminiyellow

react-virtualized just wow, amazing project, but reeeealy complex. My ambitions are much lower :)

High-Order Components, this way, you can do more things.

Can you give me specific simple example what you mean?

[geminiyellow]

@schovi yes, it is reeeealy complex, 😆

Can you give me specific simple example what you mean?

uh... i means let IScrollList work as a wrapper, not inside, like:

<IScrollList className="infinite-list" // classic html attributes
  items={this.state.list}   // list of items
  render={this.renderItem}  // item renderer function
  cache={1000}              // how many items is kept in cache
  prerender={10}            /* how many items is rendered before and after current viewport */ >
  <IScroll iScroll={iScroll} options={iScrollOptions} />
</IScrollList>

or:

IScrollList = IScrollList(IScroll, infinieOptions)

[orlowang]

@schovi this infinte example is not working 😞